Javascript计算器：程序无法读取secondnumber的问题

时间：2018-02-13 01:06:42

标签： javascript html

我的计算器只能乘以/加/减第一个数。由于某种原因，它无法访问第二个数字。出了什么问题？

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 个答案:

答案 0 :(得分：1)

enterb()从不跳过操作转到第二个号码。使用indexOf()查找操作，然后获取后面的子字符串。

clearb()还需要重置numberone和operation

如果你编写函数来完成所有重复的东西，那也会很有帮助。例如，除了输入的数字之外，所有numXXX()函数都是相同的 - 编写一个以数字作为参数的函数。与操作按钮的功能类似。

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>

相关问题
最新问题