Question

我必须做计算器，并希望添加几个按钮。

现在，我正在用百分比按钮进行战斗。我用另一个计算器复制了一个按钮的逻辑，但它没有用。

我问，因为我不太了解JavaScript。现在我正在 codecademy.com 上做一门课程。

我不想使用jQuery。

var box = document.getElementById('display');

function addtoscreen(x) {
  box.value += x;

  if (x == 'c') {
    box.value = ' ';
  }
}

function answer() {
  x = box.value;
  x = eval(x);
  box.value = x;
}

function backspace() {
  var number = box.value;
  var len = number.length - 1;
  var newnumber = number.substring(0, len);
  box.value = newnumber;
}

function power(y) {
  x = box.value;
  x = Math.pow(x, y);
  box.value = x;
}

function btnMod() {
  dokument.calculator.display.value += "%";
}

#calculator {
  width: 250px;
  height: 400px;
  border: 1px solid black;
  text-align: center;
  margin: 150px auto;
  box-shadow: 0px 0px 20px gray;
  background: green;
}
#display {
  margin-top: 25px;
  margin-bottom: 20px;
  width: 210px;
  height: 25px;
  border: 1px solid red;
  box-shadow: 0px 0px 30px red;
  text-align: right;
  font: 20px bold;
  color: blue;
}
#keys {
  width: 41px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 20px skyblue;
  cursor: poitner;
}
# keys:hover {
  background: yellow;
  font-weight: bold;
}
#equal {
  width: 90px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 20px skyblue;
  cursor: poitner;
}
# equal:hover {
  background: yellow;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="design.css">
</head>
<title>Calculator</title>
<body>
  <div id="calculator">
    <form>
      <input type="text" id="display">
      <br>
      <input type="button" value="C" id="keys" onclick="addtoscreen('c')">
      <input type="button" value="<--" id="keys" onclick="backspace() ">
      <input type="button" value="X^2" id="keys" onclick="power(2) ">
      <input type="button" value="+" id="keys" onclick="addtoscreen('+')">
      <input type="button" value="%" id="keys" onclick="btnMod()" <br>

      <input type="button" value="9" id="keys" onclick="addtoscreen('9')">
      <input type="button" value="8" id="keys" onclick="addtoscreen('8')">
      <input type="button" value="7" id="keys" onclick="addtoscreen('7')">
      <input type="button" value="-" id="keys" onclick="addtoscreen('-')">
      <br>
      <input type="button" value="6" id="keys" onclick="addtoscreen('6')">
      <input type="button" value="5" id="keys" onclick="addtoscreen('5')">
      <input type="button" value="4" id="keys" onclick="addtoscreen('4')">
      <input type="button" value="*" id="keys" onclick="addtoscreen('*')">
      <br>
      <input type="button" value="3" id="keys" onclick="addtoscreen('3')">
      <input type="button" value="2" id="keys" onclick="addtoscreen('2')">
      <input type="button" value="1" id="keys" onclick="addtoscreen('1')">
      <input type="button" value="/" id="keys" onclick="addtoscreen('/')">
      <br>
      <input type="button" value="0" id="keys" onclick="addtoscreen('0')">
      <input type="button" value="." id="keys" onclick="addtoscreen('.')">
      <input type="button" value="=" id="equal" onclick="answer()">
    </form>
    <script src="implementation.js"></script>
</body>
</html>

Answer 1

document.calculator.display未定义，您只需使用之前创建的box变量，请参阅下面的代码段。这是最后插入的新功能：

function btnMod() {
  box.value += "%";
}

＆＃13;

var box = document.getElementById('display');

function addtoscreen(x) {
  box.value += x;

  if (x == 'c') {
    box.value = ' ';
  }
}


function answer() {
  x = box.value;
  x = eval(x);
  box.value = x;
}

function backspace() {
  var number = box.value;
  var len = number.length - 1;
  var newnumber = number.substring(0, len);
  box.value = newnumber;
}

function power(y) {
  x = box.value;
  x = Math.pow(x, y);
  box.value = x;
}

function btnMod() {
  box.value += "%";
}

＆＃13;

#calculator {


  width: 250px;


  height: 400px;


  border: 1px solid black;


  text-align: center;


  margin: 150px auto;


  box-shadow: 0px 0px 20px gray;


  background: green;


}


#display {


  margin-top: 25px;


  margin-bottom: 20px;


  width: 210px;


  height: 25px;


  border: 1px solid red;


  box-shadow: 0px 0px 30px red;


  text-align: right;


  font: 20px bold;


  color: blue;


}


#keys {


  width: 41px;


  height: 35px;


  margin-left: 10px;


  margin-bottom: 20px;


  box-shadow: 0px 0px 20px skyblue;


  cursor: poitner;


}


# keys:hover {


  background: yellow;


  font-weight: bold;


}


#equal {


  width: 90px;


  height: 35px;


  margin-left: 10px;


  margin-bottom: 20px;


  box-shadow: 0px 0px 20px skyblue;


  cursor: poitner;


}


# equal:hover {


  background: yellow;


  font-weight: bold;


}

＆＃13;

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="design.css">
</head>

<title>Calculator</title>

<body>
  <div id="calculator">
    <form>
      <input type="text" id="display">
      <br>
      <input type="button" value="C" id="keys" onclick="addtoscreen('c')">
      <input type="button" value="<--" id="keys" onclick="backspace() ">
      <input type="button" value="X^2" id="keys" onclick="power(2) ">
      <input type="button" value="+" id="keys" onclick="addtoscreen('+')">
      <input type="button" value="%" id="keys" onclick="btnMod()" <br>

      <input type="button" value="9" id="keys" onclick="addtoscreen('9')">
      <input type="button" value="8" id="keys" onclick="addtoscreen('8')">
      <input type="button" value="7" id="keys" onclick="addtoscreen('7')">
      <input type="button" value="-" id="keys" onclick="addtoscreen('-')">
      <br>


      <input type="button" value="6" id="keys" onclick="addtoscreen('6')">
      <input type="button" value="5" id="keys" onclick="addtoscreen('5')">
      <input type="button" value="4" id="keys" onclick="addtoscreen('4')">
      <input type="button" value="*" id="keys" onclick="addtoscreen('*')">
      <br>

      <input type="button" value="3" id="keys" onclick="addtoscreen('3')">
      <input type="button" value="2" id="keys" onclick="addtoscreen('2')">
      <input type="button" value="1" id="keys" onclick="addtoscreen('1')">
      <input type="button" value="/" id="keys" onclick="addtoscreen('/')">
      <br>


      <input type="button" value="0" id="keys" onclick="addtoscreen('0')">
      <input type="button" value="." id="keys" onclick="addtoscreen('.')">
      <input type="button" value="=" id="equal" onclick="answer()">
    </form>

    <script src="implementation.js"></script>
</body>

</html>

＆＃13;

如何添加按钮到caculator

1 个答案: