Member Avatar for constance.dobbins

I have worked on this for hours and I can't get it to work...any help on the code appreciated! Thanks.

<html>
   <head>
         <title>
            My Calculator - Constance Dobbins
         </title>
             <script>
                 function getInputAsText(_id){return document.getElementById(_id).value}
                 function getInputAsNumber(_id){return           parseFloat(document.getElementById(_id).value)}
                 function setOutput(_id, _value){document.getElementById(_id).value = _value}
                 function calculate (code)
                  {
                     //declare variables
                       var first
                     var second
                     var resultAsNumber
       var resultAsText


                     //get variable's value
      first=getInputAsNumber("first")
      second=getInputAsNumber("second")
      if (code == 0)
        {
          resultAsNumber = first + second
          resultAsText = first + " + " + second + " = " + resultAsNumber
        }

      if (code == 1)
        {
          resultAsNumber = first -second
          resultAsText = first + " - " + second + " = " + resultAsNumber
        }

      if (code == 2)
        {
          resultAsNumber = first *second
          resultAsText = first + " * " + second + " = " + resultAsNumber
        }

      if (code == 3)
        {
          resultAsNumber = first /second
          resultAsText = first + " / " + second + " = " + resultAsNumber
        }

    //write output value
      setOutput ("resultAsText")
                 }
              </script> 
  </head>

   <body>
    Instructions:<br>
    Type a number in each box and click and choose sum, difference, product or quotient.<br>
    The answer of the two numbers will appear below.<br><br>

    Input Values:<br>
    First number to include: <INPUT id="first"><br>  
    Second number to include: <INPUT id= "second"> <br>

    <input type ="submit" value="sum" onclick=calculate (0)">
    <input type ="submit" value="difference" onclick=calculate (1)">
    <input type ="submit" value="product" onclick=calculate (2)">
    <input type ="submit" value="quotient" onclick=calculate (3)"><br><br>

    Output Values:<br>
    Result: <input id= "resultAsText" size="50" >

    </body>
</html>
  • 3 Contributors
  • 3 Replies
  • 126 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by constance.dobbins

Dani AI

Generated

Short summary: spotted the immediate problem and posted a working script that stops the calculator from failing silently. Common root causes in this kind of example are mismatched element IDs, inline handler syntax errors, or buttons that act as form submits and reload the page. After the fix from the calculator should work; the notes below explain how to harden the code and avoid the same trap in future.

Make the UI and validation friendlier. Use input type="number" (with step if you want decimals) or validate and sanitize text entry before converting. Convert with Number() or parseFloat and check isNaN/isFinite so empty or non-numeric input shows a clear error instead of producing NaN. For division check the second value for zero and give a user-facing message. Format results for display with toFixed or Intl.NumberFormat so long decimals don’t look odd.

Move behavior out of markup and improve accessibility. Instead of inline onclick use addEventListener and either load the script at the end of the body or wait for DOMContentLoaded. Give each input a <label for="...">, use an <output> or an aria-live region for the result so screen readers get updates, and ensure buttons are type="button" to prevent accidental form submission.

Debugging checklist: open the browser console and look for errors, use console.log to inspect parsed values, confirm IDs and function names match exactly, and try edge cases (empty fields, text, large numbers, division by zero). Note ’s point about forum placement — this belongs in the JavaScript forum for deeper discussion. For , once the simple fixes are in place, the above steps will make the calculator robust and easier to maintain.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

A few slight changes. main change I made was line 67 of your example.

<!DOCTYPE html>
<html>
<head>
<title>My Calculator - Constance Dobbins</title>
<script>
function getInputAsText(_id){return document.getElementById(_id).value}
function getInputAsNumber(_id){return           parseFloat(document.getElementById(_id).value)}
function setOutput(_id, _value){document.getElementById(_id).value = _value}
function calculate (code) {
      //declare variables
      var first;
      var second;
      var resultAsNumber;
      var resultAsText;
      //get variable's value
      first=getInputAsNumber("first");
      second=getInputAsNumber("second");
      if (code == 0) {
          resultAsNumber = first + second;
          resultAsText = first + " + " + second + " = " + resultAsNumber;
        }
      if (code == 1) {
          resultAsNumber = first -second;
          resultAsText = first + " - " + second + " = " + resultAsNumber;
        }
      if (code == 2) {
          resultAsNumber = first *second;
          resultAsText = first + " * " + second + " = " + resultAsNumber;
        }
      if (code == 3) {
          resultAsNumber = first /second;
          resultAsText = first + " / " + second + " = " + resultAsNumber;
        }
    //write output value
document.getElementById('resultAsText').value = resultAsText;
}
</script> 
  </head>
   <body>
    Instructions:<br>
    Type a number in each box and click and choose sum, difference, product or quotient.<br>
    The answer of the two numbers will appear below.<br><br>
    Input Values:<br>
    First number to include: <INPUT id="first"><br>  
    Second number to include: <INPUT id= "second"> <br>
    <input type ="submit" value="sum" onclick="calculate(0)">
    <input type ="submit" value="difference" onclick="calculate(1)">
    <input type ="submit" value="product" onclick="calculate(2)">
    <input type ="submit" value="quotient" onclick="calculate(3)"><br><br>
    Output Values:<br>
    Result: <input id= "resultAsText" size="50" >
</body>
</html>
Member Avatar for constance.dobbins

- thanks for checking it out for me. I appreciate it!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.