Simple Javascript/HTML Multiplcation calculator not working-CodePudding

I'm trying to get this calculator to work on my website. But the answer is not populating after I enter numbers into the fields and hit the Calculate button. I'm new to javascript and I feel like the answer is simple but I don't see it. Please help

<HTML>

<head>

<script language="javascript" type="text/javascript">
function multiplyBy()
{
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
        document.getElementById("totalsqft").innerHTML = num1 * num2;
}
</script>

</head>

<body>

<form>
Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" />
</form>
Total Square Feet:
<span id="totalsqft"></span>

</body>

</html>

CodePudding user response：

You never actually call the function. Add it as a click handler to the button. (And remove the form, since you don't want to actually post a form here.)

For example:

function multiplyBy()
{
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("totalsqft").innerHTML = num1 * num2;
}

Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" onClick="multiplyBy()" />
Total Square Feet:
<span id="totalsqft"></span>

You can also more effectively separate the logic (JavaScript) from the markup (HTML) by adding the click handler from the logic instead of using onClick in the markup. Move the JavaScript code to the end of the page as well, so the operation of adding the click handler finds the element. (At the top of the page it wouldn't find it, since it doesn't exist yet when that code executes.)

For example:

Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" />
Total Square Feet:
<span id="totalsqft"></span>

<script language="javascript" type="text/javascript">
function multiplyBy()
{
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("totalsqft").innerHTML = num1 * num2;
}

document.querySelector('input[type="button"]').addEventListener('click', multiplyBy);
</script>

CodePudding user response：

place an id on your calculate button and add this eventListener:

document.getElementById("calc").addEventListener("click", multiplyBy);

document.getElementById("calc").addEventListener("click", multiplyBy);

<html>

<head>

  <script language="javascript" type="text/javascript">
    function multiplyBy() {
      num1 = document.getElementById("firstNumber").value;
      num2 = document.getElementById("secondNumber").value;
      document.getElementById("totalsqft").innerHTML = num1 * num2;
    }
  </script>

</head>

<body>

  <form>
    Length (ft): <input id="firstNumber" type="text" /> Width (ft): <input id="secondNumber" type="text" />
    <input id = 'calc' type="button" value="Calculate" />
  </form>
  Total Square Feet:
  <span id="totalsqft"></span>

</body>

</html>