Javascript 计算器

Question

我是一个初学者，我正在尝试我的第一个真正的项目，制作一个计算器。 我有一个 HTML 和 CSS 模板，我想仅通过编辑 javascript 来使其工作。 如果有人能指出我正确的方向，我会被困在开始并有点沮丧。

这是之前提出的一个类似的问题（我想我应该在提出问题时包括这个）： Dynamic Calculator Javascript

到目前为止，这是我的脚本： https : //jsfiddle.net/andthatch/an73my86/#&togetherjs=4goj5AV6Qk

现在工作:) 谢谢大家。 如果我再次陷入困境，我会停下来。

var divElement = document.getElementById("calculator");
var keys = divElement.getElementsByTagName("span");
var input = document.getElementsByClassName('screen');
var decimalAdded = false;

    for (var i = 0; i < keys.length; i++) {
    keys[i].addEventListener('click', function(e) {

        var inputVal = input[0].innerHTML;
        var buttonVal = this.innerHTML;

        if(buttonVal === 'C') {
            input[0].innerHTML = '';
            decimalAdded = false;
        }
        else{
           input[0].innerHTML+=buttonVal;
        }

    });
}

Answer 1

您的脚本文件中有一些错误。input 是一个元素集合，因为它是通过getElementsByClassName获得的。因此，您必须指定类“screen”下唯一元素的索引作为它返回一个数组。也使用addEventListener而不是使用'onClick' 作为对象的属性

var divElement = document.getElementById("calculator");
var keys = divElement.getElementsByTagName("span");
var input = divElement.getElementsByClassName("screen");
var decimalAdded = false;

for (var i = 0; i < keys.length; i++) {
    keys[i].addEventListener('click', function(e) {

        var inputVal = input[0].innerHTML;
        var buttonVal = this.innerHTML;

        if(buttonVal === 'C') {
            input[0].innerHTML = '';
            decimalAdded = false;
        }else{
           input[0].innerHTML+=buttonVal;
        }

    });
}