Multiplying variables giving '0' answer every time

Question

I am using this code and it gives 0 answer every time when I click on Button. Here is The code.

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn">Count</button>
<script>
  var f = document.getElementById('first').value;
  var s = document.getElementById('second').value;
  var ans = document.getElementById('ans');
  var b = document.getElementById('btn');
  b.onclick = function() {
    ans.value = f * s;
  }
</script>

You're currently retrieving the values on pageload, not on button click. They're empty on pageload. — CertainPerformance, Feb 17 '20 at 02:02
The calls to get the value of `f` and `s` should be **inside** the "onclick" handler. — Pointy, Feb 17 '20 at 02:02
should get values at the moment that you make a click and also make sure that your values are number. — Hoang Subin, Feb 17 '20 at 02:09
@CertainPerformance Seems like that's an observation that should be in an answer not a comment mate — Asteroids With Wings, Feb 17 '20 at 02:14
@AsteroidsWithWings It's essentially a typo question, and should be closed, not answered. Keeping this question open and on the site will not help anyone searching in the future — CertainPerformance, Feb 17 '20 at 02:15
@Certain Then don't answer it. But if you _do_, and you did, doing it in the comments section is double-bad. This is a Q&A not a chatroom. Comments aren't peer reviewed for facual accuracy. You know that, or should — Asteroids With Wings, Feb 17 '20 at 02:15
@AsteroidsWithWings thank you for your thoughts, but this is almost 100% certainly a duplicate question. — Pointy, Feb 17 '20 at 02:15
@AsteroidsWithWings I'm pretty sure I understand how this site works, thanks though. — Pointy, Feb 17 '20 at 02:18
@Jacob I sincerely wish I could, but finding duplicates is notoriously difficult especially for questions like this. The question subjects are rarely relevant to the actual problem. — Pointy, Feb 17 '20 at 02:47
@AsteroidsWithWings here's the way it works: some questions are obvious duplicates. In this case, I've seen dozens if not hundreds of the same problem. Adding a comment provides (hopefully) immediate help to the OP, while the often tedious process of finding a duplicate goes on. That way, the OP gets a way to move forward while the site "sanitation" process proceeds. — Pointy, Feb 17 '20 at 02:50
@Pointy Thanks for the lesson but this is not a helpdesk. Funnily enough, [I also stake a claim to knowing "how it works"](https://stackoverflow.com/users/560648). I guess we'll have to agree to disagree but I would have thought it patently obvious where answers go in a Q&A, and that providing "help" anyway when you think something's a duplicate goes against the very foundation of what we're all doing here. But I guess that's nothing new, and nothing that isn't getting worse day by day. I'll say one last time: posting technical solutions/answers in the comments **bypasses peer review**. — Asteroids With Wings, Feb 17 '20 at 12:15

score 2 · Answer 1 · edited Feb 17 '20 at 02:54

The reason is that when you click the button in your original code it gets executed with 0 values because you have not asked them to get initiated after each button click. So what you are trying to do is just that both first and second text fileds will get their values in the initial page load this means those values are empty. So then when you click the button it get current values(0) and multiple. So its always 0.

In below example what @Jacob doing is he first get the target button via var b = document.getElementById('btn'); and then he have wrapped the variables inside click function . So each time you click the button and function get called and each variable get current values.

At last what he did is that he when you click the button he asks for each button current values . So it also get the current value from the elements.

Just move the onclick like up, so it gets the new values when the user clicks.

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn">Count</button>
<script>
  var b = document.getElementById('btn');
  b.onclick = function() {
    var f = document.getElementById('first').value;
    var s = document.getElementById('second').value;
    var ans = document.getElementById('ans');
    ans.value = f * s;
  }
</script>

Or to only get the elements once.

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn">Count</button>
<script>
  var b = document.getElementById('btn');
  var f = document.getElementById('first');
  var s = document.getElementById('second');
  var ans = document.getElementById('ans');
  b.onclick = function() {
    ans.value = f.value * s.value;
  }
</script>

No sir. I just upvoted your valuable answer but received this notification. I recently created account. Thanks for your help sir.
Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score. — Muhammad Usman, Feb 17 '20 at 02:34
@Jacob I think reason for down-vote is answering without a description . However I have added a small description and also up-voted Thanks — Nipun Tharuksha, Feb 17 '20 at 02:56

321B Productions · Answer 2 · 2022-11-17T23:48:06.557

It is because when you put text in an input it returns a string. A string is text. In order to make text into a number, put it inside a parseFloat() function. Also, put the onclick in the HTML. Also, you need to get the values in the function, because when the page loads, the inputs are empty, but when you click the button the user will have typed in the numbers. Also, if the value is empty it will return NaN. You need to check if the value is not equal to a string that cannot be converted to a number.

Try this:

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn" onclick="clickBtn()">Count</button>
<script>
  function clickBtn() {
    var f = document.getElementById('first').value;
    var s = document.getElementById('second').value;
    if (typeof f === "string") return
    if (typeof s === "string") return
    var ans = document.getElementById('ans');
    var b = document.getElementById('btn');
    ans.value = parseFloat(f) * parseFloat(s);
  }
</script>

Multiplying variables giving '0' answer every time

2 Answers2