Questions about javascript variable, need help~

Question

I put 5、4 into the blanks 1st Number、2nd Number, and clicked Multiply in the output. I am looking forward to get 20, but I got zero, why?

Here's the code (also on JSBin):

var num1 = document.getElementById("firstNumber").value;
var num2 = document.getElementById("secondNumber").value;

function multiplyBy() {
  var c = num1 * num2;
  document.getElementById("result").innerHTML = c;
}

var divideBy = function() {
  var c = num1 / num2;
  document.getElementById("result").innerHTML = c;
};

body {
  margin: 30px;
}

<form>
  1st Number :
  <input type="text" id="firstNumber" />
  <br>2nd Number:
  <input type="text" id="secondNumber" />
  <br>
  <input type="button" onClick="multiplyBy()" value="Multiply" />
  <button onClick=d ivideBy()>Divide</button>
</form>
<p>The Result is :
  <br>
</p>
<p id="result"></p>

Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Any code related to your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to follow some random link to help you. If the question doesn't make sense and can't be answered without the link, it's not appropriate for this site. Instead, put the [**minimum** complete example](/help/mcve) in the question. — T.J. Crowder, Apr 11 '16 at 04:25

score 1 · Answer 1 · edited May 23 '17 at 12:31

Your first two lines run immediately when the page loads, not later when you click one of the buttons. So you get the values of the inputs as of when the page loads, which is "". * implicitly converts its operands to numbers, so "" becomes 0, and 0 * 0 is 0.

You want to get the .value from the input elements inside your click handlers, so you get the current value:

// Here we get the elements, but not their values
var num1input = document.getElementById("firstNumber");
var num2input = document.getElementById("secondNumber");

function multiplyBy() {
  // Get the values as they are *now*
  var c = num1input.value * num2input.value;
  document.getElementById("result").innerHTML = c;
}

var divideBy = function() {
  // Get the values as they are *now*
  var c = num1input.value * num2input.value;
  document.getElementById("result").innerHTML = c;
};

body {
  margin: 30px;
}

<form>
  1st Number :
  <input type="text" id="firstNumber" />
  <br>2nd Number:
  <input type="text" id="secondNumber" />
  <br>
  <input type="button" onClick="multiplyBy()" value="Multiply" />
  <button onClick=d ivideBy()>Divide</button>
</form>
<p>The Result is :
  <br>
</p>
<p id="result"></p>

Side note: The value of an input is always a string. It happens that / and * will both implicitly coerce their operands to numbers, but if you did the same thing with + you'd get concatenation (one string appended to the end of the other), not addition. You want to convert your values to numbers. This answer discusses the various ways you can convert numeric strings to numbers in JavaScript.

Side note 2: As user2181397 pointed out, while the above will make your Multiply button work, there are two additional issues with your Divide button:

The default type of a button element is "submit", which will submit the form instead of just calling the click handler. Give type="button" (like you did on the input).
onClick=d ivideBy() should be onclick="divideBy()"

score 1 · Answer 2 · answered Apr 11 '16 at 04:42

If you are using button & form you need to specify the type of button that is submit,button or reset. The default is submit which will submit the form.

Secondly there is a typo in

<button onClick=d ivideBy()>Divide</button>

instead it will be onclick = "devideBy()"

You need to use these two variable inside the function.Reason being when js is parsing at beginning it is setting the value to 0 as those inputs are empty & inside the function you are getting 0.

var num1 = document.getElementById("firstNumber").value;
  var num2 = document.getElementById("secondNumber").value;

HTML

<form>
  1st Number :
  <input type="text" id="firstNumber" />
  <br>2nd Number:
  <input type="text" id="secondNumber" />
  <br>
  <input type="button" onClick="multiplyBy()" value="Multiply" />
   <!--button type button -->
  <button type = "button" onClick="divideBy()">Divide</button>
</form>
<p>The Result is :
  <br>
</p>
<p id="result"></p>

JS

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

var divideBy = function() {
  var num1 = document.getElementById("firstNumber").value;
 var num2 = document.getElementById("secondNumber").value;
  var c = num1 / num2;
  document.getElementById("result").innerHTML = c;
};

Working jsfiddle

Questions about javascript variable, need help~

2 Answers2