javascript calculator not getting values from form
Question
the 2 variables in the beginning num1 and num2 are not be grabbed from the HTML form in the javascript file. it does work if I assign the value to the input boxes but not when the user changes the value
I'm new to javascript and trying to learn so any help would greatly be appreciated
let num1 = document.getElementById("num1-el").value let num2 = document.getElementById("num2-el").value let calEl = document.getElementById("cal-el") let sumEl = document.getElementById("equals-el") let sum = 0 const submitBtn = document.getElementById("submit-btn") submitBtn.addEventListener("click", function() { if (calEl.value === "+") { sum = num1 + num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "-") { sum = num1 - num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "*") { sum = num1 * num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "/") { sum = num1 / num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } })
body { background-color: lightskyblue; background-size: cover; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; text-align: center; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div> <form> <input id="num1-el" type="number" value="<? echo $num1; ?>"> </div> <div> <select id="cal-el"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </div> <div> <input id="num2-el" type="number"> </div> </form> <div> <button id="submit-btn">Submit</button> </div> <div id="equals-el"> </div> <script src="index.js"></script> </body> </html>
5 answers
solution1
3 ACCPTED 2021-10-29 13:58:47
Because you are initializing num1 = document.getElementById("num1-el").value at the very beginning (when it's empty), and then never updating it. You have to grab it and num2 after you click the button.
Also you have to convert them to number, because they are strings "2" , not numbers 2 .
2 + 3 == 5 but "2" + "3" == "23" .
let num1; let num2; let calEl = document.getElementById("cal-el") let sumEl = document.getElementById("equals-el") let sum = 0 const submitBtn = document.getElementById("submit-btn") submitBtn.addEventListener("click", function() { num1 = +document.getElementById("num1-el").value; num2 = +document.getElementById("num2-el").value; if (calEl.value === "+") { sum = num1 + num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "-") { sum = num1 - num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "*") { sum = num1 * num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "/") { sum = num1 / num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } })
body { background-color: lightskyblue; background-size: cover; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; text-align: center; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div> <form> <input id="num1-el" type="number" value="<? echo $num1; ?>"> </div> <div> <select id="cal-el"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </div> <div> <input id="num2-el" type="number"> </div> </form> <div> <button id="submit-btn">Submit</button> </div> <div id="equals-el"> </div> <script src="index.js"></script> </body> </html>
solution2
2 2021-10-29 13:54:44
You must take values from input inside the function as a event is needed to take the values (sometimes it is onchange , oninput ...).
As the initial values of input are null means it is empty(on load of script and variables are taking that only). But when you use any event they are filled by now and the updated values will be taken into the variables
Also use Number() to convert string to number
let sum = 0 const submitBtn = document.getElementById("submit-btn") let calEl = document.getElementById("cal-el") let sumEl = document.getElementById("equals-el") submitBtn.addEventListener("click", function() { let num1 = document.getElementById("num1-el").value let num11 = Number(num1) let num2 = document.getElementById("num2-el").value let num22 = Number(num2) if (calEl.value === "+") { sum = num11 + num22 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "-") { sum = num1 - num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "*") { sum = num1 * num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } else if (calEl.value === "/") { sum = num1 / num2 sumEl.innerHTML += `<p>The Answer is ${sum}</p>` } })
body { background-color: lightskyblue; background-size: cover; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; text-align: center; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div> <form> <input id="num1-el" type="number" value="<? echo $num1; ?>"> </div> <div> <select id="cal-el"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </div> <div> <input id="num2-el" type="number"> </div> </form> <div> <button id="submit-btn">Submit</button> </div> <div id="equals-el"> </div> <script src="index.js"></script> </body> </html>
solution3
2 2021-10-29 13:58:34
A couple of things are wrong here:
- You want to sample
num1andnum2values when you click the submit button and not when the code loaded. - Since you're using
input, the.valueis a string so you need to cast it to number withNumber(). - Instead of
sumEl.innerHTML +=, use onlysumEl.innerHTML =. Otherwise it will just add another element to the answer. - Since you have the same code
<p>The Answer is ${sum}</p>, you can just export it below all of yourif else- much cleaner code. - Use variables only when you use them. If you don't need them in high scope - don't define them there just because you can.
let calEl = document.getElementById("cal-el"); let sumEl = document.getElementById("equals-el"); const submitBtn = document.getElementById("submit-btn"); submitBtn.addEventListener("click", function() { let sum = 0; let num1 = Number(document.getElementById("num1-el").value); let num2 = Number(document.getElementById("num2-el").value); if (calEl.value === "+") { sum = num1 + num2 } else if (calEl.value === "-") { sum = num1 - num2 } else if (calEl.value === "*") { sum = num1 * num2 } else if (calEl.value === "/") { sum = num1 / num2 } sumEl.innerHTML = `<p>The Answer is ${sum}</p>` })
body { background-color: lightskyblue; background-size: cover; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; text-align: center; }
<form> <input id="num1-el" type="number" value="<? echo $num1; ?>"> <div> <select id="cal-el"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </div> <div> <input id="num2-el" type="number"> </div> </form> <div> <button id="submit-btn">Submit</button> </div> <div id="equals-el"> </div>
solution4
0 2021-10-29 14:08:22
First of all, I'd recommend reading something about server/client sided programming to get the difference between languages like Javascript and PHP. A good start might be
What is the difference between client-side and server-side programming? .
To address some of the issues with your code:
the HTML is invalid, not all elements that are opened are also closed. Consider using a linter or validator
value="<? echo $num1; ?>"is php syntax, not needed here.The
<form>is commonly used to progress something, with a custom action. My guess is you can simplify the code by just using theonClick:You're getting the
num1-elandnum2-elvalues before the button is pressed, lets move that inside theonClickso we're sure we have the up-to-date values.Since
. value. valuereturns a string, we'll need to useNumber()to convert it to a real numberSince you're always doing the
sumEl.innerHTML += ..., we can move that outside theif/elseto make it somewhat more readable.
const btn = document.getElementById("submit-btn") btn.addEventListener("click", function() { let num1 = Number(document.getElementById("num1-el").value); let num2 = Number(document.getElementById("num2-el").value); let calEl = document.getElementById("cal-el") let sumEl = document.getElementById("equals-el") let sum = 0; if (calEl.value === "+") { sum = num1 + num2; } else if (calEl.value === "-") { sum = num1 - num2; } else if (calEl.value === "*") { sum = num1 * num2; } else if (calEl.value === "/") { sum = num1 / num2; } sumEl.innerHTML += `<p>The Answer is ${sum}</p>` });
body { background-color: lightskyblue; background-size: cover; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; text-align: center; } .container { display: flex; align-items: center; flex-direction: column; } input, select, button { width: 100px; }
<div class='container'> <input id="num1-el" type="number"> <select id="cal-el"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input id="num2-el" type="number"> <button id="submit-btn">Calculate</button> <div id="equals-el"> </div>
solution5
0 2021-10-29 14:32:51
Any value toke from input , textarea , select or other HTML element using javascript, by default it data type is string until using data type casting (converted to a new variable and another data type) on this value.
Also, You can use switch() instead if() statement, to make your code more clear , and more understable.
const submitBtn = document.getElementById("submit-btn"); submitBtn.addEventListener("click", function() { let sum = 0; let num1 = Number(document.getElementById("num1-el").value); let num2 = Number(document.getElementById("num2-el").value); let calEl = document.getElementById("cal-el"); let sumEl = document.getElementById("equals-el"); switch(calEl.value){ case "+": {sum = num1 + num2;break;} case "-": {sum = num1 - num2;break;} case "*": {sum = num1 * num2;break;} case "/": {sum = num1 / num2;break;} // If the user didn't select the operator (+,-,* or /) then the defualt operator is '+'; default: {sum = num1 + num2;break;} } sumEl.innerHTML += `<p>The Answer is ${sum}</p>`; });
body { background-color: lightskyblue; background-size: cover; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; text-align: center; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div> <form> <input id="num1-el" type="number" value="<? echo $num1; ?>"> </div> <div> <select id="cal-el"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </div> <div> <input id="num2-el" type="number"> </div> </form> <div> <button id="submit-btn">Submit</button> </div> <div id="equals-el"> </div> <script src="index.js"></script> </body> </html>
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.