CODEWITHSUNDEEP
javascriptif-statementcalculatorcalc
Elisabeth
Elisabeth

Reputation: 45

Javascript Calculator using if/else statements

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>

Upvotes: 3

Views: 12038

Answers (3)

Vamshi Krishna
Vamshi Krishna

Reputation: 1

Create calculator using if else conditions in javascript

const operator = ( '/' );

const num1 = 1;
const num2 = 2;

let result;

if (operator == '+') {
    result = num1 + num2;
} else if (operator == '-') {
    result = num1 - num2;
} else if (operator == '*') {
    result = num1 * num2;
} else {
    result = num1 / num2;
}

//console.log(`${num1} ${operator} ${num2} = ${result}`);
console.log(`${num1}${operator}${num2}= ${result}`);

Upvotes: 0

Sang Yun Park
Sang Yun Park

Reputation: 459

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:

  1. Store user inputs to inputs
  2. When the user presses =, it iterates inputs and execute calculation.

  3. 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.

  4. outputs the calculated value

There could be few points where you would get stuck:

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

Happy coding ~

Upvotes: 2

Jalpesh Patel
Jalpesh Patel

Reputation: 3188

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.

Upvotes: 2

Related Questions