How can i call a different functions seperately using a single button-CodePudding

I have to create a calculator but i have to use separate functions for add , subtract , division and multiply

there should be an equal to (=) button which upon clicking should display the result

operators should be selected using the dropdown box

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>calculator</title>

</head>
<body>
<h1 align="center">calculator</h1>
<script type="text/javascript">

function add()
{
var a=parseInt(document.getElementById("firstnumber").value);
var b=parseInt(document.getElementById("secondnumber").value);
var c=a b
document.getElementById("answer").innerHTML=c;
}

function sub()
 { 
      var a=parseInt(document.getElementById("firstnumber").value);
      var b=parseInt(document.getElementById("secondnumber").value);
      var c=a-b;
      document.getElementById("answer").innerHTML=c;
 }

 function mul()
 { 
  var a=parseInt(document.getElementById("firstnumber").value);
      var b=parseInt(document.getElementById("secondnumber").value);
      var c=a*b;
      document.getElementById("answer").innerHTML=c;
 }

 function div()
 { 
  var a=parseInt(document.getElementById("firstnumber").value);
      var b=parseInt(document.getElementById("secondnumber").value);
      var c=a/b;
      document.getElementById("answer").innerHTML=c;
 }

</script>
<p>First Number: <input id="firstnumber"></p>
<p>Second Number: <input id="secondnumber"></p>
<select id="operators">
  <option value="add" onclick="add()"> </option>
  <option value="sub" onclick="sub()">-</option>
  <option value="mul" onclick="mul()">*</option>
  <option value="div" onclick="div()">/</option>
</select>

<button onclick="add.call(this);sub.call(this);mul.call(this);div.call(this);">=</button>
<p id="answer"></p>

</body>


</html>

CodePudding user response：

To call multiple functions using a single button, you can use a JavaScript function that calls the other functions in the desired order.

Here is an example of how you can do that:

<!-- HTML code for the calculator -->
<p>First Number: <input id="firstnumber"></p>
<p>Second Number: <input id="secondnumber"></p>
<select id="operators">
  <option value="add"> </option>
  <option value="sub">-</option>
  <option value="mul">*</option>
  <option value="div">/</option>
</select>

<button onclick="computeResult()">=</button>
<p id="answer"></p>

<!-- JavaScript code for the calculator -->
<script>
  function computeResult() {
    // Get the selected operator
    var operator = document.getElementById("operators").value;

    // Call the appropriate function based on the selected operator
    if (operator === "add") {
      add();
    } else if (operator === "sub") {
      sub();
    } else if (operator === "mul") {
      mul();
    } else if (operator === "div") {
      div();
    }
  }

  function add() {
    var a = parseInt(document.getElementById("firstnumber").value);
    var b = parseInt(document.getElementById("secondnumber").value);
    var c = a   b;
    document.getElementById("answer").innerHTML = c;
  }

  function sub() {
    var a = parseInt(document.getElementById("firstnumber").value);
    var b = parseInt(document.getElementById("secondnumber").value);
    var c = a - b;
    document.getElementById("answer").innerHTML = c;
  }

  function mul() {
    var a = parseInt(document.getElementById("firstnumber").value);
    var b = parseInt(document.getElementById("secondnumber").value);
    var c = a * b;
    document.getElementById("answer").innerHTML = c;
  }

  function div() {
    var a = parseInt(document.getElementById("firstnumber").value);
    var b = parseInt(document.getElementById("secondnumber").value);
    var c = a / b;
    document.getElementById("answer").innerHTML = c;
  }
</script>

In this example, the computeResult() function is called when the = button is clicked. It gets the selected operator from the dropdown box, and then calls the appropriate function (add(), sub(), mul(), or div()) based on the selected operator.

CodePudding user response：

i think thats what you were looking for. make sure to read what i wrote under the code

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>calculator</title>
  </head>
  <body>
    <h1 align="center">calculator</h1>
    <p>First Number: <input id="firstnumber" /></p>
    <p>Second Number: <input id="secondnumber" /></p>
    <select id="operators">
      <option value="add"> </option>
      <option value="sub">-</option>
      <option value="mul">*</option>
      <option value="div">/</option>
    </select>

    <button id="calcBtn">=</button>
    <p id="answer"></p>
    <script src="script.js"></script>
  </body>
</html>

script.js:

document.getElementById("calcBtn").addEventListener("click", () => {
  let operator = document.getElementById("operators").value;
  let a = parseInt(document.getElementById("firstnumber").value);
  let b = parseInt(document.getElementById("secondnumber").value);
  switch (operator) {
    case "add":
      add();
      break;
    case "sub":
      sub();
      break;
    case "mul":
      mul();
      break;
    case "div":
      div();
      break;

    default:
      break;
  }
  function add() {
    let c = a   b;
    document.getElementById("answer").innerHTML = c;
  }

  function sub() {
    let c = a - b;
    document.getElementById("answer").innerHTML = c;
  }

  function mul() {
    let c = a * b;
    document.getElementById("answer").innerHTML = c;
  }

  function div() {
    let c = a / b;
    document.getElementById("answer").innerHTML = c;
  }
});

dont use onclick, give element an id and then add event listenner to it works the same but addeventlistenner is better you can replace .addEventListener("click", () => { with .addEventListener("click", function() { its up to you
always place your script tag directly above the body tag
use script src instead of script > code, it makes the html more clean
use let instead of var
switch case its like if, but in situations like that better, because its easier to write what to do depending on the value usage:

switch(variable){
    case "variable value":
        code
        break;
}

i think thats all