Display JavaScript Math Result

Question

I am having trouble displaying a math function, there is nothing stated wrong in the console, so I do not know where I am going wrong. the output does not display the correct answer here...

Desired outcome: enter number in each input, and javascript multiplies those two input values then displays the result when you click the button.

var money = document.getElementById('money').value;
    var years = document.getElementById('years').value;
    var output = document.getElementById('output');
    var myOutput = money * years;
    const btn = document.getElementById('btn');


    btn.addEventListener('click', () => {
      output.innerHTML = myOutput;
    })

<body>
  <h4>how much money do you make a year?</h4>

  <input id="money" type="number" placeholder="$$$"></input>
  <input id="years" type="number" placeholder="years"></input>

  <div id="output">

  </div>

  <button id="btn" type="button">go</button>

</body>

yes i noticed this and was about to edit, however, when fixed, the code still does not display the correct answer.... — hannacreed
– hannacreed, Commented Sep 22, 2017 at 20:35
You've got some fundamental misunderstandings of how imperative programming languages work. Your declaration of myOutput does not establish a permanent relationship between that variable and other values; it's a request to perform that computation once, at the time the variable is declared. — Pointy
– Pointy, Commented Sep 22, 2017 at 20:36
yeh, I only want it displayed once, then reset on window refresh... — hannacreed
– hannacreed, Commented Sep 22, 2017 at 20:38

Scott Sauyet · Accepted Answer · 2017-09-22 21:07:18Z

I would structure it like this:

const btn = document.getElementById('btn');
const money = document.getElementById('money');
const years = document.getElementById('years');
const output = document.getElementById('output');

btn.addEventListener('click', () => {
  output.innerHTML = Number(money.value) * Number(years.value);
})

<body>
  <h4>how much money do you make a year?</h4>

  <input id="money" type="number" placeholder="$$$"></input>
  <input id="years" type="number" placeholder="years"></input>

  <div id="output">

  </div>

  <button id="btn" type="button">go</button>

</body>

As others have said, you need to move the logic inside the click handler. (In your code as it's structured, you get the two values once, at the load of the script and never update them.)

I have also broken out the searching of the DOM nodes from the calculation; it's probably a good practice for anytime such changes can happen more than once.

Finally, I converted the String values you'll get from the form elements into numbers before doing any work with them. This is generally necessary, although because of some Javascript magic, you don't actually have to do it here. (Try changing from multiplication to addition to see the dangers of forgetting this.)

Pablo Darde · Accepted Answer · 2017-09-24 19:10:44Z

1

When you init your application, your input fields don't have any value filled yet.

var money = document.getElementById('money');
var years = document.getElementById('years');
var output = document.getElementById('output');
const btn = document.getElementById('btn');

function calc(val1, val2) {
	return Number(val1.value) * Number(val2.value);
}


btn.addEventListener('click', (e) => {
  output.innerHTML = calc(money, years);
});

<body>
  <h4>how much money do you make a year?</h4>

  <input id="money" type="number" placeholder="$$$"></input>
  <input id="years" type="number" placeholder="years"></input>

  <div id="output">

  </div>

  <button id="btn" type="button">go</button>

</body>

edited Sep 24, 2017 at 19:10

answered Sep 22, 2017 at 20:48

Pablo Darde

6,51211 gold badges44 silver badges61 bronze badges

5 Comments

hannacreed Over a year ago

ah alright, I was thinking of this, but I wasn't sure how to create a value for it besides "money = 0;" or something of the sort.

Scott Sauyet Over a year ago

This answer and my own are very similar. The only essential difference is that there is no conversion of the String form values to numbers. That could cause problems with other forumulas.

Pablo Darde Over a year ago

Hi @hannacreed, I didn't understand your comment, can you clarify, please?. In addition, there's no need to convert the string values to numbers, JavaScript handles this for you, just keep the input types "number".

Scott Sauyet Over a year ago

@PabloDarde Try changing from multiplication to addition and you'll see the issue.

Pablo Darde Over a year ago

I got, you are alright! This occurs because input.value return a string type. The fix is cast to Number. See the updated solution.

Brr Switch · Accepted Answer · 2017-09-22 20:35:57Z

You need to set the innerHTML of the element. You want to get the user input values after the click of the button. Therefore, you move your variables inside the callback function

    const btn = document.getElementById('btn');


    btn.addEventListener('click', () => {
      var money = document.getElementById('money').value;
    var years = document.getElementById('years').value;
    var output = document.getElementById('output');
    output.innerHTML = money * years;
    })

<body>
  <h4>how much money do you make a year?</h4>

  <input id="money" type="number" placeholder="$$$"></input>
  <input id="years" type="number" placeholder="years"></input>

  <div id="output">

  </div>

  <button id="btn" type="button">go</button>

</body>

rjustin · Accepted Answer · 2017-09-22 20:36:55Z

0

Try this set inner html of div and have everything but the btn element happen on click:

    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
    var money = document.getElementById('money').value;
    var years = document.getElementById('years').value;
    var output = document.getElementById('output');
    var myOutput = money * years;

      output.innerHTML = myOutput;
    })

<body>
  <h4>how much money do you make a year?</h4>

  <input id="money" type="number" placeholder="$$$"></input>
  <input id="years" type="number" placeholder="years"></input>

  <div id="output">

  </div>

  <button id="btn" type="button">go</button>

</body>

answered Sep 22, 2017 at 20:36

rjustin

1,43710 silver badges19 bronze badges

Collectives™ on Stack Overflow

Display JavaScript Math Result

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related