I can't seem to get my addition function to add the two numbers together-CodePudding

here's the code

`how do you get my code to add the two numbers in the addition function? I've tried different things within the addition function but nothing seems to stop it from adding it together like a string. I don't know what else to add , so this for being able to post the question. and i also have a currency converter question, idk if you can dm but lmk if you're available, thank you.

how do you get my code to add the two numbers in the addition function? I've tried different things within the addition function but nothing seems to stop it from adding it together like a string. I don't know what else to add , so this for being able to post the question. and i also have a currency converter question, idk if you can dm but lmk if you're available, thank you.

enter code here

`html`
<!DOCTYPE html>
<html> 
<head>
<meta charset=utf-8 />
<title>Basic math </title>
<style type="text/css">
body {margin: 30px;}
</style> 
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
<input type="button" onclick="addition()" value="add" />
<input type="button" onclick="minus()" value="minus"/>
<input type="button" onclick="modeBy()" value="mode"/>
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>
</body>
<script src="sum.js"></script>
</html>

java:








function multiplyBy()
{
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
        document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy() 
{ 
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}



//I can't seem to get my addition to actually add the numbers together.//
function addition() {
       
  const num1= document.getElementById("firstNumber").value;
   const  num2 = document.getElementById("secondNumber").value;   
   document.getElementById("result").innerHTML= parseInt(num1   num2);
   
}

function minus()
{
    num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
        
document.getElementById("result").innerHTML = num1 - num2;
}

function modeBy()
{
    num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 % num2;
}

CodePudding user response：

Parsing your variables before they get retrieved by the dom is a way to do it.

function addition() {
       
  const num1= parseInt(document.getElementById("firstNumber").value);
   const  num2 = parseInt(document.getElementById("secondNumber").value);   
   document.getElementById("result").innerHTML= num1   num2;
   
}

CodePudding user response：

Because document.getElementById("firstNumber").value return string

And operator of javascript with string : '1' '2' = '12'

With /, *, % , value is treated as a number

You should convert to number for calculator with Number() or parseInt() : same as :

function multiplyBy()
{
  let num1 = document.getElementById("firstNumber").value;
  let num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy() 
{ 
  let num1 = document.getElementById("firstNumber").value;
  let num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 / num2;
}



//I can't seem to get my addition to actually add the numbers together.//
function addition() {
  let num1= document.getElementById("firstNumber").value;
  let num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML= Number(num1)   Number(num2);
  // or
  //document.getElementById("result").innerHTML= parseInt(num1)   parseInt(num2);
}

function minus()
{
  let num1 = document.getElementById("firstNumber").value;
  let num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 - num2;
}

function modeBy()
{
  let num1 = document.getElementById("firstNumber").value;
  let num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 % num2;
}

<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
<input type="button" onclick="addition()" value="add" />
<input type="button" onclick="minus()" value="minus"/>
<input type="button" onclick="modeBy()" value="mode"/>
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>