计算器 - 时钟数字和文本框中的显示

Question

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

如果我们点击键，它应该显示一个数字。例如，单击1，然后单击2，然后单击3，它将在文本框中显示“123”。现在它不起作用。请参阅the demo in jsfiddle.

我使用变量'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; 

我需要更正我的代码。顺便说一句，如果我点击“。”这是一个十进制数，怎么样？

Answer 1

处理程序应该修改文本框。现在，您设置文本字段的值，但不会更新它以响应单击事件！

试试这个：

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;
    }
} 

参见 fiddle 。

更新

要排除密钥，您可以执行以下操作：

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;

    }
} 

Answer 2

这是你小提琴工作：

Fiddle

我改变了这个：

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

function( e )这样您就可以了解点按e.target.innerHTML

的目标