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>
4 answers
solution1
1 2017-09-22 20:48:59
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>
solution2
1 2017-09-22 20:50:02
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.)
solution3
0 2017-09-22 20:35:57
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>
solution4
0 2017-09-22 20:36:55
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.