JavaScript getElementsByClassName_Javascript_Html_Button

JavaScript getElementsByClassName

javascript html button

JavaScript getElementsByClassName,javascript,html,button,Javascript,Html,Button,我正在尝试建立一个屏幕上的计算器。现在，我可以在控制台中显示html div和一些js，但当我单击计算器上的数字按钮时，它不会像我希望的那样登录到控制台 index.html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Calculator</title> <link rel="styl

我正在尝试建立一个屏幕上的计算器。现在，我可以在控制台中显示html div和一些js，但当我单击计算器上的数字按钮时，它不会像我希望的那样登录到控制台

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Calculator</title>
        <link rel="stylesheet" href="calculator.css" type="text/css">
    </head>
    <body>
        <button class="number key 1">1</button>
        <button class="number key 2">2</button>
        <button class="number key 3">3</button>
        <button class="number key 4">4</button>
        <button class="number key 5">5</button>
        <button class="number key 6">6</button>
        <button class="number key 7">7</button>
        <button class="number key 8">8</button>
        <button class="number key 9">9</button>
        <script src="calculator.js"></script>
    </body>
</html>

仅使用数字命名类是无效的。看到这个了吗有关如何命名CSS类的详细信息

您可以使用一次访问所有按钮。例如，使用

.key

：

var buttons = document.querySelectorAll(".key"); // HTML collection

使用

[].forEach.call（按钮，（btn，i）=>{}）

可以运行整个集合。使用将单击事件添加到每个按钮

示例

var buttons=document.querySelectorAll（“.key”）；
[]forEach.呼叫（按钮，（btn，i）=>{
btn.addEventListener（“单击”，函数（）{
控制台日志（i+1）；
});
})

1
2.
3.
4.
5.
6.
7.
8.
9

如前所述，数字不是有效的类名。我将改为使用value属性，该属性在按钮上有效。我还添加了一个小检查，以尝试获取实际返回的数字

HTML

1
...

var keys=document.getElementsByClassName（'key'）；
对于（var k=0；k=0）val=parseInt（val）；
控制台日志（val）；
})
}

GetElementsByCassName返回HTMLCollection-您不能将onclick事件分配给HTMLCollection（即使它是该集合中的单个元素，它仍然是集合而不是单个元素），同时，

onclick

是错误的。JavaScript区分大小写-

onclick

。使用ID而不是类名迭代返回的每个集合，并分配处理程序。我会创建一个助手函数来简化这个过程。我也正要添加它，@AndrewLi

var buttons = document.querySelectorAll(".key"); // HTML collection

<button class="number key" value="1">1</button>
...

var keys = document.getElementsByClassName('key');
for(var k = 0; k < keys.length; k++){
    keys[k].addEventListener('click', function(){
        var val = this.value;
        if(this.className.indexOf('number') >=0 ) val = parseInt(val);
        console.log(val);
    })
}