I am trying to create 4 buttons in HTML that calls the following functions such as Adding, Subtracti-CodePudding

I am new to JavaScript and I'm a bit confused about what I'm doing wrong. For this Assignment I need to create 4 buttons in HTML that calls the following functions such as adding, subtracting, multiplying and dividing. I am suppose to prompt the user to enter two numbers and then it will calculate it.

I figured out how to make one adding button but for some reason I am having trouble creating the other buttons for - * /. I am also not sure why it doesn't keep track of the calculations for the subtraction buttons and etc. I am kind of confused how to create multiple functions and buttons all in one program.

function add() {

  var num1, num2, num3;

  numAdd1 = parseInt(prompt("Enter First Number:"));
  numAdd2 = parseInt(prompt("Enter Second Number:"));
  numAdd3 = numAdd1   numAdd2



  resultAdd = "Result is "   String(numAdd3)
  //document.write(numAdd3   "<br>")


  document.getElementById("result").innerHTML = resultAdd;

}

function sub() {

  var sub1, sub2, sub3;


  sub1 = parseInt(prompt("Enter First Number:"));
  sub2 = parseInt(prompt("Enter Second Number:"));
  sub3 = sub1 - sub2



  result2 = "result is : "   String(numSub3)
  //document.write(Sub3   "<br>")


  document.getElementById("result2").innerHTML = result2;

}

<button onclick="add()">Press to Add</button>
<p id="result">Result:</p>

<button onclick="sub()">Press to Subtract</button>
<p id="result2">Result:</p>

<button onclick="Multiply()">Press to Multiply</button>
<p id="result">Result:</p>

<button onclick="Divide()">Press to Divide</button>
<p id="result2">Result:</p>

CodePudding user response：

You kind of made a typo. At the end of the result2 variable "assignment"(which means to set the value of the variable), and you used the wrong name for the variable. numSub3 should be sub3.

result2 = "result is : "   String(sub3);

CodePudding user response：

Welcome, and good luck with the assignment. Nice start!

I would recommend using input elements for your numeric inputs, as I have shown in this partial example. Also, be sure to shoot for consistency in your variable naming and general code layout. The sooner you develop those habits the better.

And challenge yourself to add a few bells and whistles!

function run(operator) {
  const values = getValues();
  const result = calculate(values.left, values.right, operator);
  writeResult(result);
}

function calculate(left, right, operator) {

  if (operator === ' ') {
    return left   right;
  }
  if (operator === '-') {
    return left - right;
  }
  /* 
  add rest of operations...
  */
  throw Error('Invalid operator passed in');
}

function getValues() {
  return {
    left:  document.getElementById('left').value,
    right:  document.getElementById('right').value,
  }
}

function writeResult(result) {
  document.getElementById('result').innerText = result;
}

<input type="number" id="left" />
<input type="number" id="right" />
<br/>
<button onclick="run(' ')">Add</button>
<button onclick="run('-')">Subtract</button> ...more buttons
<div id="result"></div>