Question

所以，我不熟悉javaScript或编程。我被赋予了一个任务，创建一个简单的JS计算器。这似乎很容易但我在挑战开始时遇到了一个错误。我有1-9个数字按钮，其中span class = nButton，我有一个div，其中class = Screen但按下任何nKey都不起作用。我在这做错了什么？

var nKeys = document.getElementsByClassName('nButton');
var display = document.getElementsByClassName('Screen');


for (var i = 0; i < nKeys.length; i++) {
    nKeys[i].onclick = function() {
        display.innerHTML = this.innerHTML;
    };
}

Answer 1

尝试为您的显示器分配一个ID：

<div id="Screen"></div>

然后使用document.getElementById()选择它。

var display = document.getElementById('Screen');

由于您使用的是document.getElementsByClassName()，因此您获得了一个由（可能）1个元素组成的HTMLCollection。相反，getElementById()仅返回单个HTMLElement。

既然你说你是JavaScript的新手，我想阻止你使用像onclick这样的“老派”事件听众。 HTMLElement.onclick仍工作，但HTMLElement.addEventListener()通常更好，因为您可以将多个侦听器绑定到您的元素。

var nKeys = document.getElementsByClassName('nButton');
var display = document.getElementById('Screen');

var length = nKeys.length;
for (var i = 0; i < length; i++) {
  nKeys[i].addEventListener('click', function() {
    display.innerHTML = this.innerHTML;
  }, false);
}

不幸的是，IE8中不支持addEventListener。如果你需要支持奶奶，那么使用jQuery：

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
  var $nKeys = $('.nButton');
  var $display = $('#Screen');

  var length = $nKeys.length;
  for (var i = 0; i < length; i++) {
    $($nKeys[i]).on('click', function() {
      $display.html($(this).html());
    });
  }
</script>

javascript innerHTML过渡

1 个答案: