In: Computer Science
Need to modify so that it uses a function. We are taking a number and rounding it to 2 from the decimal.
<!doctype html>
<html>
<head>
   <title> NumberRounder </title>
</head>
<body>
   <h2>Number Rounder</h2>
   <p>
   Enter a number: <input type="text" id="numberBox"
size=12 value=3.14159>
   </p>
   <input type="button" value="Round It"
      
onclick="number=parseFloat(document.getElementId('numberBox').value);
          
    rounded=Math.round(number*100)/100;
          
   
document.getElementId('outputDiv').innerHTML=
          
        number + ' rounded to one
decimal place is ' + rounded;">
  
   <hr>
   <div id="outputDiv"></div>
</body>
</html>
Hi,
Please see the below code which is working and expected output is showing. Seperate function has been added and called it from the onclick event.
<html>
<head>
    <title> NumberRounder </title>
    <script>
        function myClick(e){
        var number=parseFloat(document.getElementById('numberBox').value);
               rounded=Math.round(number*100)/100;
               document.getElementById('outputDiv').innerHTML=
                   number + ' rounded to one decimal place is ' + rounded;
        }
    </script>
</head>
<body>
    <h2>Number Rounder</h2>
    <p>
        Enter a number: <input type="text" id="numberBox" size="12" value="3.14159">
    </p>
    <input type="button" value="Round It" onclick="myClick()">
    <hr>
    <div id="outputDiv"></div>
</body>
</html>

The only change which is required in your program is :
Use document.getElementById instead of document.getElementId