CODEWITHSUNDEEP
javascript
Eman
Eman

Reputation: 27

How to pass user input for simple calculator

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>

Upvotes: 0

Views: 526

Answers (3)

AndrewG
AndrewG

Reputation: 145

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);
});

Upvotes: 0

brk
brk

Reputation: 50326

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>

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 2

Related Questions