Javascript Calculator using if/else statements

Question

I have a school project that is asking me to build a basic Javascript calculator using if/else statements. I'm very new to this language (and programming in general) and am having trouble with applying the syntax I have learned and how to successfully problem solve.

So on to the code: As you will see in the comments in the HTML file, all javascript code must be in the js file. First, I need to bind the onclick events by adding code to get all the input elements into an Array called inputs (which I have done) and then use a for-loop to iterate through an array (which I have started) . Then, in the for-loop, I need to use if/else statement to skip the input elements that are not buttons, and set the other input elements' onclick handler to a function that calls the calcu variable inside of it. This is where I get stuck on how to accomplish this task.

I also need to make sure to pass the inputs[i].id to the calcu as well. Then of course, I have to finish the calcu() function using if/else statements.

In the js file, I have inserted comments to show my thought process and questions I have asked myself to work through the problem.

I would really appreciate any help or direction you can give me. Thanks!

 var calcu = function(calcValue) { /* "calc.output.value += "1";"" use to output numbers? */ if (calcValue) { } }; document.getElementById(inputs[i].id).onclick = calcu; for (var i = 0; i <= inputs[id].length, i++) { /* input button elements onlick handler needs to be set to (equal to?) a function that calls the calcu variable inside of it */ if (input.type = button) { console.log() /* Need input that is not a button to be skipped*/ } else(input.type != button) { } }

 <body> <div id="content"> <div id="calculator-container"> <!-- DO NOT CHANGE THE FORM! Only use external JavaScript files --> <form name="calc"> <label for="output">A Basic Calculator</label> <!-- the name of the textbox is "output" --> <input id="output" name="output" type="text" readonly> <br> <input type="button" id="1" value=" 1 "> <input type="button" id="2" value=" 2 "> <input type="button" id="3" value=" 3 "> <input type="button" id="+" value=" + "> <br> <input type="button" id="4" value=" 4 "> <input type="button" id="5" value=" 5 "> <input type="button" id="6" value=" 6 "> <input type="button" id="-" value=" - "> <br> <input type="button" id="7" value=" 7 "> <input type="button" id="8" value=" 8 "> <input type="button" id="9" value=" 9 "> <input type="button" id="*" value=" x "> <br> <input type="button" id="c" value=" C "> <input type="button" id="0" value=" 0 "> <input type="button" id="equate" value=" = "> <input type="button" id="/" value="&divide;"> </form> </div> </div> </body>

Answer 1

I found some basic mistakes like ; or = missing also if you want to put condition in else part than you must have to use else if condition. you need to pass input value now in for loop properly.

var calcu = function(calcValue) {

  if (calcValue) {


  }
}

document.getElementById(inputs[i].id).onclick = calcu;
for (var i = 0; i <= inputs[id].length; i++) 
{
  if (input.type == button) 
  {
     console.log();
  } 
  else if(input.type != button) {

  }

}

Here is your html code.

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->
      <form name="calc">
        <label for="output">A Basic Calculator</label>
        <!-- the name of the textbox is "output" -->
        <input id="output" name="output" type="text" readonly>

        <br>
        <input type="button" id="1" value="  1  ">
        <input type="button" id="2" value="  2  ">
        <input type="button" id="3" value="  3  ">
        <input type="button" id="+" value="  +  ">
        <br>
        <input type="button" id="4" value="  4  ">
        <input type="button" id="5" value="  5  ">
        <input type="button" id="6" value="  6  ">
        <input type="button" id="-" value="  -  ">
        <br>
        <input type="button" id="7" value="  7  ">
        <input type="button" id="8" value="  8  ">
        <input type="button" id="9" value="  9  ">
        <input type="button" id="*" value="  x  ">
        <br>
        <input type="button" id="c" value="  C  ">
        <input type="button" id="0" value="  0  ">
        <input type="button" id="equate" value="  =  ">
        <input type="button" id="/" value="&divide;">
      </form>
    </div>

  </div>

</body>

Hope this will help you.

Answer 2

Well, I guess it is 'homework' from your school.

I assume this calculator is supposed to execute multiplication and division before addition and subtraction.

If I were you, I would approach the task in the following order:

Store user inputs to inputs
When the user presses = , it iterates inputs and execute calculation.
While executing calculation, declare a temporary variable that keeps an updated value after each calculation. If instructed, you should perform multiplication and division prior to addition and subtraction.
outputs the calculated value

There could be few points where you would get stuck:

You need to convert user inputs to proper number. For example, inputs of 3, 5, 1 needs to be transformed into 351
You need to find a proper way to perform multiplication and division before addition and subtraction while iterating inputs array.

Happy coding ~

Answer 3

Calculator using JavaScript if else conditions

var a =12
var b =4
var c = ("+,-,/,*")
if (c == '+'){
   console.log(a+b)
}else if (c =='-'){
    console.log(a-b)
}else if (c=='*'){
    console.log(a*b)
} else {
    console.log(a/b)
}

console.log(a/b);

Javascript Calculator using if/else statements

Question

3 answers

solution1
2 ACCPTED 2018-05-25 06:12:38

solution2
2 2018-05-25 06:20:51

solution3
0 2021-11-24 07:28:14

Javascript Calculator using if/else statements

Question

3 answers

solution1 2 ACCPTED 2018-05-25 06:12:38

solution2 2 2018-05-25 06:20:51

solution3 0 2021-11-24 07:28:14

solution1
2 ACCPTED 2018-05-25 06:12:38

solution2
2 2018-05-25 06:20:51

solution3
0 2021-11-24 07:28:14