时间戳

首页 > 解决方案 > 为什么我的 java 脚本计算器不工作

javascript - 为什么我的 java 脚本计算器不工作

问题描述

我想制作一个计算器，显示在计算之前点击的数字。此版本尚未完成，但显示数字的代码已完成，但未按预期工作。

function getHistory() {
  return document.querySelector(".history-value").innerText;
}

function printHistory(num) {
  document.querySelector(".history-value").innerText = num;
}

function getOutput() {
  document.getElementById("output-value").innertxt;
}

function printOutput(num) {
  document.getElementById("output-value").innerText = num;
}
let getOperator = document.getElementsByClassName("operator");
for (var i = 0; i < getOperator.length; i++) {
  getOperator[i].addEventListener("click", function() {
    //uncompleted code
  })
}

let getNumber = document.getElementsByClassName("number");
for (var i = 0; i < getNumber.length; i++) {
  getNumber[i].addEventListener("click", function() {
    let output = getOutput();
    if (output != NaN) {
      output = output + this.id
      printOutput(output)
    }
  })
}
<div class="container">
  <div class="calculator">
    <div class="result">
      <div class="history">
        <p class="history-value"></p>
      </div>
      <div class="output">
        <p id="output-value"></p>
      </div>
    </div>
    <div class="keyboard">
      <button class="operator" id="clear">C</button>
      <button class="operator" id="backspace">CE</button>
      <button class="operator" id="%">%</button>
      <button class="operator" id="/">&#247;</button>
      <button class="number" id="7">7</button>
      <button class="number" id="8">8</button>
      <button class="number" id="9">9</button>
      <button class="operator" id="*">&times;</button>
      <button class="number" id="4">4</button>
      <button class="number" id="5">5</button>
      <button class="number" id="6">6</button>
      <button class="operator" id="-">-</button>
      <button class="number" id="1">1</button>
      <button class="number" id="2">2</button>
      <button class="number" id="3">3</button>
      <button class="operator" id="+">+</button>
      <button class="empty" id="empty"></button>
      <button class="number" id="0">0</button>
      <button class="empty" id="empty"></button>
      <button class="operator" id="=">=</button>
    </div>
  </div>
</div>

它必须在输出中显示我按下的所有数字，但它显示未定义加上最后按下的数字

标签： javascript

解决方案

罪魁祸首在此功能中：

function getOutput(){
  document.getElementById("output-value").innertxt;
}

这里有两个问题：

1-注意错字：是innerText，不是innertxt！2-这个函数没有返回值是innerText，事实上它没有返回任何调用它的代码，因此是“未定义”。

此外，要显示所有按下的数字，您可以使用 将数字附加到字符串output中+=，如下所示：

if (output!=NaN) {
      output+=this.id
      printOutput(output)
    }

（也向操作员的处理程序添加类似的东西onclick）。 

<body>
    <div class="container">
      <div class="calculator">
        <div class="result">
          <div class="history">
            <p class="history-value"></p>
          </div>
          <div class="output">
            <p id="output-value"></p>
          </div>
        </div>
        <div class="keyboard">
          <button class="operator" id="clear">C</button>
          <button class="operator" id="backspace">CE</button>
          <button class="operator" id="%">%</button>
          <button class="operator" id="/">&#247;</button>
          <button class="number" id="7">7</button>
          <button class="number" id="8">8</button>
          <button class="number" id="9">9</button>
          <button class="operator" id="*">&times;</button>
          <button class="number" id="4">4</button>
          <button class="number" id="5">5</button>
          <button class="number" id="6">6</button>
          <button class="operator" id="-">-</button>
          <button class="number" id="1">1</button>
          <button class="number" id="2">2</button>
          <button class="number" id="3">3</button>
          <button class="operator" id="+">+</button>
          <button class="empty" id="empty"></button>
          <button class="number" id="0">0</button>
          <button class="empty" id="empty"></button>
          <button class="operator" id="=">=</button>
        </div>
      </div>
    </div>
    <script>
    function getHistory(){
       return document.querySelector(".history-value").innerText;
     }
    function printHistory(num){
      document.querySelector(".history-value").innerText=num;
    }
    function getOutput(){
      return document.getElementById("output-value").innerText;
    }
    function printOutput(num){
      document.getElementById("output-value").innerText=num;
    }
    let getOperator= document.getElementsByClassName("operator");
    for (var i = 0; i < getOperator.length; i++) {
      getOperator[i].addEventListener("click",function(){
    //uncompleted code
      })
    }
    let getNumber= document.getElementsByClassName("number");
    for (var i = 0; i < getNumber.length; i++) {
      getNumber[i].addEventListener("click",function(){
        let output=getOutput();
        if (output!=NaN) {
          output+=this.id
          printOutput(output)
        }
      })
    }
    </script>
  </body>
</html>

推荐阅读