Javascript Calculator: issues with program not reading secondnumber

My calculator works with only multiplying/adding/subtracting/dividing the first number. For some reason it can't access the second number. What's going wrong?

var firstnumber;
var secondnumber;
var result;
var operations;


function numzero() {
  if (document.getElementById("maininput").value === "0" || document.getElementById("maininput").value === result) {
    document.getElementById("maininput").value = "0";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.getElementById("maininput").value = document.getElementById("maininput").value + "0";
  }
}

function numone() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "1";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "1";
  }
}


function numtwo() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "2";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "2";
  }
}

function numone() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "1";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "1";
  }
}

function numthree() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "3";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "3";
  }
}

function numfour() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "4";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "4";
  }
}

function numfive() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "5";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "5";
  }
}

function numsix() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "6";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "6";
  }
}

function numseven() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "7";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "7";
  }
}

function numeight() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "8";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "8";
  }
}

function numnine() {
  if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
    document.inputmaster.maininput.value = "9";
  } else //if(document.inputmaster.maininput.value != "0")
  {
    document.inputmaster.maininput.value = document.inputmaster.maininput.value + "9";
  }
}

function clearb() {
  document.getElementById("maininput").value = "";
  return;
}




function plusb() {
  operation = "+";
  firstnumber = parseInt(document.getElementById("maininput").value);
  document.getElementById("maininput").value = firstnumber + operation;

}

function minusb() {
  operation = "-";
  firstnumber = parseInt(document.getElementById("maininput").value);
  document.getElementById("maininput").value = "0";
  document.getElementById("maininput").value = firstnumber + operation;
}

function timesb() {
  operation = "*";
  firstnumber = parseInt(document.getElementById("maininput").value);
  document.getElementById("maininput").value = firstnumber + operation;
}

function divideb() {
  operation = "/";
  firstnumber = parseInt(document.getElementById("maininput").value);
  document.getElementById("maininput").value = firstnumber + operation;
}


function enterb() {
  secondnumber = parseInt(document.getElementById("maininput").value);

  if (operation == "+") {
    result = firstnumber + secondnumber;
  } else if (operation == "-") {

    result = firstnumber - secondnumber;
  } else if (operation == "*") {

    result = firstnumber * secondnumber;
  } else if (operation == "/") {

    result = firstnumber / secondnumber;
  }

  document.getElementById("maininput").value = "";
  document.getElementById("maininput").value = result.toString();
  return;
}
h1 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 45px;
}

#zero {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#one {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#two {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#three {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#four {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#five {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#six {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#seven {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#eight {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#nine {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#plus {
  width: 60px;
  height: 60px;
  margin: 1px;
  background-color: purple;
  color: red;
  font-size: 15px;
}

#minus {
  width: 60px;
  height: 60px;
  margin: 1px;
  background-color: purple;
  color: red;
  font-size: 15px;
}

#divide {
  width: 60px;
  height: 60px;
  margin: 1px;
  background-color: purple;
  color: red;
  font-size: 15px;
}

#times {
  width: 60px;
  height: 60px;
  margin: 1px;
  background-color: purple;
  color: red;
  font-size: 15px;
}

#Clear {
  width: 60px;
  height: 60px;
  margin: 1px;
  background-color: red;
}

#Enter {
  width: 60px;
  height: 60px;
  margin: 1px;
  background-color: orange;
}

#maininput {
  margin: 5px;
  font-size: 25px;
  font-family: monospace;
}

.row-one {
  padding-top: 25px;
  padding-bottom: 25px;
  border-bottom: solid;
  border-spacing: 3px;
}

.row-two {
  padding-bottom: 15px;
  padding-top: 15px;
}

.row-three {
  padding-bottom: 15px;
}

.row-four {
  padding-bottom: 15px;
}

.row-five {
  padding-bottom: 15px;
}

.final-row {
  padding-bottom: 15px;
}

.enter-row {
  padding-top: 15px;
}

.button-cal {
  text-align: center;
  border: solid;
  border-width: 5px;
}
<h1>Simple Calculator</h1>

<div class="button-cal" id="fullcal">


  <div class="row-one">
    <form name="inputmaster">
      <input size="25" style="width: 300px; height: 50px;" value=0 id="maininput">
    </form>
  </div>
  <div class="row-two">
    <button onclick="divideb()" id="divide">/</button>
    <button onclick="timesb()" id="times">*</button>
    <button onclick="clearb()" id="Clear">Clear</button>
  </div>
  <div class="row-three">
    <button onclick="numnine()" id="nine">9</button>
    <button onclick="plusb()" id="plus">+</button>
    <button onclick="minusb()" id="minus">-</button>
  </div>
  <div class="row-four">
    <button onclick="numsix()" id="six">6</button>
    <button onclick="numseven()" id="seven">7</button>
    <button onclick="numeight()" id="eight">8</button>
  </div>
  <div class="row-five">
    <button onclick="numthree()" id="three">3</button>
    <button onclick="numfour()" id="four">4</button>
    <button onclick="numfive()" id="five">5</button>
  </div>
  <div class="final-row">
    <button onclick="numzero()" id="zero">0</button>
    <button onclick="numone()" id="one">1</button>
    <button onclick="numtwo()" id="two">2</button>
    <div class="enter-row">
      <button onclick="enterb()" id="Enter">Enter</button>
    </div>
  </div>
</div>

1 answer

  • answered 2018-02-13 01:06 Barmar

    enterb() never skips past the operation to go to the second number. Use indexOf() to find the operation, then get the substring after it.

    clearb() also needs to reset numberone and operation

    It would also be helpful if you wrote functions to do all the repetitive stuff. For instance, all the numXXX() functions are identical except for the number they're entering -- write a function that takes a number as a parameter. Similarly with the functions for the operation buttons.

    var firstnumber;
    var secondnumber;
    var result;
    var operation;
    
    
    function numzero() {
      if (document.getElementById("maininput").value === "0" || document.getElementById("maininput").value === result) {
        document.getElementById("maininput").value = "0";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.getElementById("maininput").value = document.getElementById("maininput").value + "0";
      }
    }
    
    function numone() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "1";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "1";
      }
    }
    
    
    function numtwo() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "2";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "2";
      }
    }
    
    function numthree() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "3";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "3";
      }
    }
    
    function numfour() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "4";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "4";
      }
    }
    
    function numfive() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "5";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "5";
      }
    }
    
    function numsix() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "6";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "6";
      }
    }
    
    function numseven() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "7";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "7";
      }
    }
    
    function numeight() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "8";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "8";
      }
    }
    
    function numnine() {
      if (document.inputmaster.maininput.value === "0" || document.inputmaster.maininput.value === result) {
        document.inputmaster.maininput.value = "9";
      } else //if(document.inputmaster.maininput.value != "0")
      {
        document.inputmaster.maininput.value = document.inputmaster.maininput.value + "9";
      }
    }
    
    function clearb() {
      document.getElementById("maininput").value = "";
      operation = null;
      numberone = null;
      return;
    }
    
    
    
    
    function plusb() {
      operation = "+";
      firstnumber = parseInt(document.getElementById("maininput").value);
      document.getElementById("maininput").value = firstnumber + operation;
    
    }
    
    function minusb() {
      operation = "-";
      firstnumber = parseInt(document.getElementById("maininput").value);
      document.getElementById("maininput").value = "0";
      document.getElementById("maininput").value = firstnumber + operation;
    }
    
    function timesb() {
      operation = "*";
      firstnumber = parseInt(document.getElementById("maininput").value);
      document.getElementById("maininput").value = firstnumber + operation;
    }
    
    function divideb() {
      operation = "/";
      firstnumber = parseInt(document.getElementById("maininput").value);
      document.getElementById("maininput").value = firstnumber + operation;
    }
    
    
    function enterb() {
      if (!operation) {
        alert("Choose an operation first");
        return;
      }
      var input = document.getElementById("maininput").value;
      var opindex = input.indexOf(operation);
      if (opindex == input.length-1) {
        alert("Enter a second number first");
        return;
      }
      secondnumber = parseInt(input.substr(opindex+1));
    
      if (operation == "+") {
        result = firstnumber + secondnumber;
      } else if (operation == "-") {
    
        result = firstnumber - secondnumber;
      } else if (operation == "*") {
    
        result = firstnumber * secondnumber;
      } else if (operation == "/") {
    
        result = firstnumber / secondnumber;
      }
    
      document.getElementById("maininput").value = "";
      document.getElementById("maininput").value = result.toString();
      return;
    }
    h1 {
      text-align: center;
      margin-bottom: 50px;
      font-size: 45px;
    }
    
    #zero {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #one {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #two {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #three {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #four {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #five {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #six {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #seven {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #eight {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #nine {
      width: 60px;
      height: 60px;
      margin: 1px;
    }
    
    #plus {
      width: 60px;
      height: 60px;
      margin: 1px;
      background-color: purple;
      color: red;
      font-size: 15px;
    }
    
    #minus {
      width: 60px;
      height: 60px;
      margin: 1px;
      background-color: purple;
      color: red;
      font-size: 15px;
    }
    
    #divide {
      width: 60px;
      height: 60px;
      margin: 1px;
      background-color: purple;
      color: red;
      font-size: 15px;
    }
    
    #times {
      width: 60px;
      height: 60px;
      margin: 1px;
      background-color: purple;
      color: red;
      font-size: 15px;
    }
    
    #Clear {
      width: 60px;
      height: 60px;
      margin: 1px;
      background-color: red;
    }
    
    #Enter {
      width: 60px;
      height: 60px;
      margin: 1px;
      background-color: orange;
    }
    
    #maininput {
      margin: 5px;
      font-size: 25px;
      font-family: monospace;
    }
    
    .row-one {
      padding-top: 25px;
      padding-bottom: 25px;
      border-bottom: solid;
      border-spacing: 3px;
    }
    
    .row-two {
      padding-bottom: 15px;
      padding-top: 15px;
    }
    
    .row-three {
      padding-bottom: 15px;
    }
    
    .row-four {
      padding-bottom: 15px;
    }
    
    .row-five {
      padding-bottom: 15px;
    }
    
    .final-row {
      padding-bottom: 15px;
    }
    
    .enter-row {
      padding-top: 15px;
    }
    
    .button-cal {
      text-align: center;
      border: solid;
      border-width: 5px;
    }
    <h1>Simple Calculator</h1>
    
    <div class="button-cal" id="fullcal">
    
    
      <div class="row-one">
        <form name="inputmaster">
          <input size="25" style="width: 300px; height: 50px;" value=0 id="maininput">
        </form>
      </div>
      <div class="row-two">
        <button onclick="divideb()" id="divide">/</button>
        <button onclick="timesb()" id="times">*</button>
        <button onclick="clearb()" id="Clear">Clear</button>
      </div>
      <div class="row-three">
        <button onclick="numnine()" id="nine">9</button>
        <button onclick="plusb()" id="plus">+</button>
        <button onclick="minusb()" id="minus">-</button>
      </div>
      <div class="row-four">
        <button onclick="numsix()" id="six">6</button>
        <button onclick="numseven()" id="seven">7</button>
        <button onclick="numeight()" id="eight">8</button>
      </div>
      <div class="row-five">
        <button onclick="numthree()" id="three">3</button>
        <button onclick="numfour()" id="four">4</button>
        <button onclick="numfive()" id="five">5</button>
      </div>
      <div class="final-row">
        <button onclick="numzero()" id="zero">0</button>
        <button onclick="numone()" id="one">1</button>
        <button onclick="numtwo()" id="two">2</button>
        <div class="enter-row">
          <button onclick="enterb()" id="Enter">Enter</button>
        </div>
      </div>
    </div>