javascript - 单击按钮不起作用。我关注了一个 YouTube 视频，但它对我不起作用

Question

当我点击一个按钮时，数字没有显示在 current-output div 上。如果我正确连接按钮，这应该是一个测试。有什么可能的解决办法吗？会不会是使用类的问题？我正在使用 vanilla JavaScript 编写代码。

const numberButtons = Array.from(document.getElementsByClassName('number'));
const previousOutputText = Array.from(document.getElementsByClassName('previous-output'));
const currentOutputText = Array.from(document.getElementsByClassName('current-output'));

class Calculator {
  constructor(previousOutputText, currentOutputText) {
    this.previousOutputText = previousOutputText;
    this.currentOutputText = currentOutputText;
  }

  addNumber(number) {
    this.currentOutput = number;
  }

  updateDisplay() {
    this.currentOutputText.innerHTML = this.currentOutput;
  }
}

const calculator = new Calculator(previousOutputText, currentOutputText);

numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.addNumber(button.innerHTML);
    calculator.updateDisplay();
  })
})

<div class="output">
  <div data-previous-output class="previous-output"></div>
  <div data-current-output class="current-output"></div>
</div>

<button class="span-two all-clear" data-all-clear>AC</button>
<button class="delete" data-delete>DEL</button>
<button class="operation" data-operation>/</button>
<button class="number" data-number>7</button>
<button class="number" data-number>8</button>
<button class="number" data-number>9</button>
<button class="operation" data-operation>*</button>
<button class="number" data-number>4</button>
<button class="number" data-number>5</button>
<button class="number" data-number>6</button>
<button class="operation" data-operation>-</button>
<button class="number" data-number>1</button>
<button class="number" data-number>2</button>
<button class="number" data-number>3</button>
<button class="operation" data-operation>+</button>
<button class="number" data-number>0</button>
<button class="number" data-number>.</button>
<button class="span-two equals" data-equals>=</button>

Answer 1

您没有提供脚本位置，这可能是问题所在。

检查这行按钮是否真的从 DOM 中找到

console.log('Working on buttons', numberButtons);
numberButtons.forEach(button => {

如果他们不是礼物，移动<script>就在</body>之前

然后就放一些console.log进入点击事件处理程序，一些计算器方法将为您提供非常简单的调试。