javascript innerHTML transition

javascript innerHTML transition

本文关键字：transition innerHTML javascript      更新时间：2024-05-18

所以，我对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;
    };
}

尝试给您的显示div一个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>
相关文章：