CODEWITHSUNDEEP
javascriptfor-loopif-statementbuttonclick
Elisabeth
Elisabeth

Reputation: 45

Binding onclick event

The project I have to create is a basic calculator with if/else statements. As a newbie to JavaScript, I am trying to take this step by step and had previously posted this just to get me started. Based off of that feedback I re-did my code and want to check and see if what I need to work on.

The code you see in JavaScript is where I am attempting to code while following the given instructions:

"...add code to get all the input elements into an Array called inputs (using document.getElementsByTagName) and use a for-loop to iterate through the Array. During the for-loop you will use an if statement to skip the input element that is not a button, and then set the other input elements' onclick handler to a function that calls calcu inside of it. Make sure you pass inputs[i].id (or this.id) to calcu so calcu will have the correct value for its internal calcValue variable."

The Jasmine framework is attached and does give me an error: A Basic Calculator Test Site buttons should have their onclick event binded to calcu(this.id); so I know my code has errors. I would really appreciate any suggestions and help you can give me. Thanks!

var calcu = function(calcValue) {

  /* "calc.output.value += "1";"" use to output numbers? */

  if (calcValue) {


  }
};

var inputs = new Array(document.getElementsByTagName('input'));
for (var i = 0; i <= inputs.length, i++) {
  if (inputs[i].type == "button") {
    document.getElementById(input.id).onclick = function() {
      console.log(calcu(this.id));
    }
    if (inputs[i].type !== "button") {
      return;
    }
  }

}
<!DOCTYPE html>
<html>

<head>
  <!-- test framework css -->
  <link rel="stylesheet" href="js/test/lib/jasmine-2.1.3/jasmine.css">

  <!-- test framework javascript -->
  <script src="js/test/lib/jasmine-2.1.3/jasmine.js"></script>
  <script src="js/test/lib/jasmine-2.1.3/jasmine-html.js"></script>
  <script src="js/test/lib/jasmine-2.1.3/boot.js"></script>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>A Basic Calculator (If-Else)</title>
  <meta name="description" content="A Basic Calculator">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- The name of the form is "calc" -->

      <!-- 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>
  <!-- source files -->
  <script src="js/vendor/math.js"></script>
  <script src="js/ifelse.js"></script>
  <script src="js/test/ifelseSpec.js"></script>
</body>

</html>

Upvotes: 0

Views: 2691

Answers (1)

Saeed
Saeed

Reputation: 5488

Your js code have these issues

1- Convert , to ;

for (var i = 0; i < inputs.length; i++) {

2- Remove this extra if

if (inputs[i].type !== "button") {
         return;
}

3- Change input to inputs[i]

document.getElementById(inputs[i].id).onclick

4- Get Id of element with this instead

ev.target.id

Part of adding event listeners

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

Full code here. Just complete your calcu function

var calcu = function(calcValue) {
  /* "calc.output.value += "1";"" use to output numbers? */

  if (calcValue) {}
};

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type == "button") {
    document.getElementById(inputs[i].id).onclick = function(ev) {
      console.log(calcu(ev.target.id));
    };
  }
}
<html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>A Basic Calculator (If-Else)</title>
  <meta name="description" content="A Basic Calculator">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- The name of the form is "calc" -->

      <!-- 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>

</html>

Upvotes: 1

Related Questions