<script> var button = document.getElementsByTagName('button'); button[0].onclick = display_result; button[1].onclick = clear_text; document.onload = function() { document.getElementById('values').focus(); }; function convert_to_pounds(yard_Amount) { return (yard_Amount * 3 ); } function display_result() { var kilograms = document.getElementById("values").value; var result = convert_to_pounds(kilograms); if (document.getElementById("values").value == '') { alert("Cannot be empty. Kindly type your value to convert."); document.getElementById('values').focus(); } else { document.getElementById('result').innerHTML = kilograms + " yard(s) is equal to " + result.toFixed() + " feet(s). "; } } function clear_text() { document.getElementById("values").value=""; document.getElementById("result").innerHTML=""; document.getElementById("values").focus(); } function numberTo_Convert(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } </script>
<style type="text/css"> body { margin:auto; width:400px; } td { text-align: center; color: blue; font-size: 18px; font-weight: bold; font-family: cursive; } .txt_Number { width: 100px; text-align: center; border: blue 1px solid; font-size: 25px; background: aliceblue; } .btn_convert { border: blue 1px solid; background: azure; color: blue; font-size: 18px; font-family: cursive; padding: 5px; } .btn_clear { border: red 1px solid; background: azure; color: red; width: 75px; font-size: 18px; font-family: cursive; padding: 5px; } #result { font-size: larger; font-family: cursive; text-align: center; margin-top: 70px; border: blue 1px solid; line-height: 80px; color:red; } </style>