Javascript Calulator--单击数字并显示在文本框中

基本上我想练习一个简单的计算器。我正处在第一步。

如果我们单击键，它应该显示一个数字。例如，单击1、2、3，它将在文本框中显示“123”。现在它不起作用了。请看

我使用变量“inputVal”来收集数字。它初始化为空。然后将其指定给文本框

var inputVal ="";
// Add onclick event to all the keys and perform operations
for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function (e) {
       var input = document.querySelector('.keys');
       inputVal += input.innerHTML;
    }
} 
document.getElementsByClassName("window").item(0).innerHTML=inputVal; 

var inputVal=”“；
//将onclick事件添加到所有键并执行操作
对于（变量i=0；i

---

我需要更正我的代码。顺便说一句，如果我单击“.”这是一个十进制数字，那么处理程序应该如何修改文本框。现在，您可以设置文本字段的值，但不会更新它以响应单击事件

试试这个：

var keys = document.querySelectorAll('.keys span');
var textField = document.getElementsByClassName("window").item(0);
var operators = ['+', '-', 'x', '÷'];

// Add onclick event to all the keys and perform operations
for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function (e) {
        // `this` is always set to the target element
        textField.innerHTML += this.innerHTML;
    }
} 

var keys=document.querySelectorAll（'.keys span'）；
var textField=document.getElementsByClassName（“窗口”）.item（0）；
变量运算符=['+'，'-'，'x'，'÷']；
//将onclick事件添加到所有键并执行操作
对于（变量i=0；i

看

更新：

要排除关键点，可以执行以下操作：

var exclude = ['0', 'C'];
// Add onclick event to all the keys and perform operations
for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function (e) {
        var keyVal = this.innerHTML;
        if (exclude.indexOf(keyVal) >= 0) return;
        // `this` is always set to the target element
        textField.innerHTML += keyVal;

    }
} 

var exclude=['0'，'C']；
//将onclick事件添加到所有键并执行操作
对于（变量i=0；i=0）返回；
//`this`始终设置为目标元素
textField.innerHTML+=keyVal；
}
} 

这是你的小提琴作品：

我改变了这一点：

keys[i].onclick = function(e) {
    inputVal += e.target.innerHTML;
    document.getElementsByClassName("window").item(0).innerHTML = inputVal; 
}

---

function（e）

这样，您就可以通过一个简单的

if

语句了解单击

e.target.innerHTML

的目标，或者从处理程序首先绑定到的元素中排除这些元素。