Question

因此标题说明了大部分故事。我正在制作一个纯HTML / CSS / JS计算器，并且HTML / CSS运行良好，但似乎无法使第一个函数起作用。我已经完成了谷歌搜索，但是只是比较代码，我的代码看起来应该可以工作，所以我很困惑。无论如何，这是任何潜在的相关代码。

var oneBtn = document.getElementById('calc-one');
var twoBtn = document.getElementById('calc-two');
var threeBtn = document.getElementById('calc-three');
var fourBtn = document.getElementById('calc-four');
var fiveBtn = document.getElementById('calc-five');
var sixBtn = document.getElementById('calc-six');
var sevenBtn = document.getElementById('calc-seven');
var eightBtn = document.getElementById('calc-eight');
var nineBtn = document.getElementById('calc-nine');
var zeroBtn = document.getElementById('calc-zero');

var decimalBtn = document.getElementById('calc-decimal');
var clearBtn = document.getElementById('calc-clear');
var backspaceBtn = document.getElementById('calc-backspace');
var displayValElement = document.getElementById('calc-display-val');

var displayVal = '0';
var pendingVal;
var evalStringArray = [];

var calcNumBtns = document.getElementsByClassName('calc-btn-num');
var calcOperatorBtns = document.getElementsByClassName('calc-btn-operator');

var updateDisplayVal = (clickObj) => {
  var btnText = clickObj.target.innerText;

  if (displayVal === '0')
    displayVal = '';

  displayVal += btnText;
  displayValElement.innerText = displayVal;
}

for (let i = 0; i < calcNumBtns.length; i++) {
  calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
}
//for (let i = 0; i < calcOperatorBtns.length; i++) {
//    calcOperatorBtns[i].addEventListener('click', performOperation, false)
//}

clearBtn.onClick = () => {
  displayVal = '0';
  pendingVal = undefined;
  evalStringArray = [];
  displayValElement.innerHTML = displayVal;
}

backspaceBtn.onClick = () => {
  let lengthOfDisplayVal = displayVal.length;
  displayVal = displayVal.slice(0, lengthOfDisplayVal - 1);

  if (displayVal === '')
    displayVal = '0';
  displayValElement.innerText = displayVal;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}

.calc-btn {
  background-color: silver;
  color: black;
  width: 25px;
  height: 45px;
  border: 1px solid gray;
  text-align: center;
  cursor: pointer;
  font-size: 32px;
  font-weight: 100;
  padding-top: 3px;
}

.calc-btn:hover {
  background-color: orange;
}

.row {
  display: table;
  table-layout: fixed;
  width: 200px;
}

.column {
  display: table-cell;
}

#calc-zero {
  width: 52.66666667px;
  border-radius: 0 0 0 7px;
}

#calc-clear {
  width: 52.66666667px;
}

#calc-display-val {
  height: 80x;
  color: white;
  text-align: right;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-top: 1px solid gray;
  font-size: 48px;
  background-color: #383838;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px;
  border-radius: 7px 7px 0 0;
}

.calc-btn-operator {
  background-color: orange;
  color: white;
}

h1 {
  text-align: center;
  margin-top: 50px;
}

#calc-equals {
  border-radius: 0 0 7px 0;
}

#calc-parent {
  margin-left: calc(50% - 100px);
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <h1>Pure HTML/CSS/JS Calculator</h1>

  <div id="calc-parent">
    <div class="row">
      <div class="column" id="calc-display-val">0</div>
    </div>
    <div class="row">
      <div class="calc-btn column" id="calc-clear">AC</div>
      <div class="calc-btn column" id="calc-backspace">&#8676;</div>
      <div class="calc-btn calc-btn-operator column" id="calc-divide">&#247;</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-seven">7</div>
      <div class="calc-btn calc-btn-num column" id="calc-eight">8</div>
      <div class="calc-btn calc-btn-num column" id="calc-nine">9</div>
      <div class="calc-btn calc-btn-operator column" id="calc-multiply">x</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-four">4</div>
      <div class="calc-btn calc-btn-num column" id="calc-five">5</div>
      <div class="calc-btn calc-btn-num column" id="calc-six">6</div>
      <div class="calc-btn calc-btn-operator column" id="calc-minus">-</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-one">1</div>
      <div class="calc-btn calc-btn-num column" id="calc-two">2</div>
      <div class="calc-btn calc-btn-num column" id="calc-three">3</div>
      <div class="calc-btn calc-btn-operator column" id="calc-plus">+</div>
    </div>
    <div class="row">
      <div class="calc-btn calc-btn-num column" id="calc-zero">0</div>
      <div class="calc-btn column" id="calc-decimal">.</div>
      <div class="calc-btn calc-btn-operator column" id="calc-equals">=</div>
    </div>
  </div>
</body>

Answer 1

使用 c 舔，而不是 C 舔。即onclick中的小写字母c可以解决您的问题。

Answer 2

首先，在使用ES6时，应在脚本的开头添加“使用严格”。

第二，确保在DOM准备就绪时运行脚本，否则getElementById将是未定义的，因为尚未呈现该元素。

第三处输入错误：尝试在我的测试中使用的btnBackspace.onclick。（使用Firefox）

第四，可能就在这里，但是您忘记了HTML标记。

Answer 3

将backspaceBtn.onClick更改为backspaceBtn.addEventListener("click", function () {应该可以解决问题。我为您准备了一个小提琴here。

'Backspace'和'Clear'函数在JavaScript计算器中不起作用

3 个答案: