如何为简单计算器传递用户输入

Question

I am self-learning JavaScript and I am a bit confused on how to pass the user input as parameters. I still have the mindset of Python, which is why I think I am struggling. Any help is appreciated.

 function userInput(num1, num2) { var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); return num1, num2; } function addition(num1, num2) { document.getElementById("result").innerHTML = (num1 + num2); alert("Your answer is " + (num1 + num2)); return addition; }

 <form name="calculator"> Number 1: <input type="text" id="number1"> Number 2: <input type="text" id="number2"> <input type="button" value="ADD" onclick="javaScript:addition()"> <input type="button" value="SUB" onclick="javaScript:subtraction()"> <input type="button" value="MUL" onclick="javaScript:multiply()"> <input type="button" value="DIV" onclick="javaScript:division()"> <input type="button" value="MOD" onclick="javaScript:modulus()"> </form> <p>The result is: <br> <span id="result"></span> </p>

Answer 1

You need to get the values in addition and you don't need userInput function. Below is the updated code for you:

 function addition() { var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); var sumOfNumbers = num1 + num2; document.getElementById("result").innerHTML = sumOfNumbers; alert("Your answer is " + sumOfNumbers); } 

 <form name="calculator"> Number 1: <input type="text" id="number1"> Number 2: <input type="text" id="number2"> <input type="button" value="ADD" onclick="javaScript:addition()"> <input type="button" value="SUB" onclick="javaScript:subtraction()"> <input type="button" value="MUL" onclick="javaScript:multiply()"> <input type="button" value="DIV" onclick="javaScript:division()"> <input type="button" value="MOD" onclick="javaScript:modulus()"> </form> <p>The result is: <br> <span id="result"></span> </p> 

Answer 2

Create a button and call the add function

 function add(num1, num2) { var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); addition(num1, num2) return num1, num2; } function addition(num1, num2) { document.getElementById("result").innerHTML = (num1 + num2); alert("Your answer is " + (num1 + num2)); return addition; } 

 <input type="text" id="number1"> <input type="text" id="number2"> <button onclick="add()">Add</button> <div id="result"></div> 

Answer 3

You do not need to pass parameters. Try the following:

 function addition(){ var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); document.getElementById("result").textContent = num1 + num2; alert("Your answer is " + (num1 + num2)); } 

 Number1: <input type="text" id="number1"/><br> Number2: <input type="text" id="number2"/><br> <button id="add" onclick="addition()">Add</button> Result: <label type="text" id="result"/> 

Answer 4

Different way of doing this using event listener. Which is a bit cleaner looking in my opinion. Just giving you another option.

JSFIDDLE: https://jsfiddle.net/py70618w/10/ <--- you can see it live in action.

HTML

<form name="calculator">
 Number 1: <input type="text" id="number1"> Number 2: <input type="text" 
 id="number2">

 <input type="button" id="add" value="ADD">
 <input type="button" value="SUB" onclick="javaScript:subtraction()">
 <input type="button" value="MUL" onclick="javaScript:multiply()">
 <input type="button" value="DIV" onclick="javaScript:division()">
 <input type="button" value="MOD" onclick="javaScript:modulus()">

</form>

<p>The result is: <br>
 <span id="result"></span>
</p>

Refactored Javascript :

document.getElementById("add").addEventListener("click", function(){
var num1 = parseInt(document.getElementById("number1").value);
var num2 = parseInt(document.getElementById("number2").value);
document.getElementById("result").innerHTML = (num1+num2);
});