JavaScript getElementsByClassName

Question

I'm trying to build an on screen calculator. As of right now, I can get my html divs to show and some of my js to work in the console, but when I click a number button on the calculator, it does not log to the console like I want it to.

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>

calculator.js:

add = function(num1, num2) {
    return num1 + num2;
};

subtract = function(num1, num2) {
    return num1 - num2;
};

multiply = function(num1, num2) {
    return num1 * num2;
};

divide = function(num1, num2) {
    return num1 / num2;
};

document.getElementsByClassName("1").onClick = (function() { console.log(1) });
document.getElementsByClassName("2").onClick = (function() { console.log(2) });
document.getElementsByClassName("3").onClick = (function() { console.log(3) });
document.getElementsByClassName("4").onClick = (function() { console.log(4) });
document.getElementsByClassName("5").onClick = (function() { console.log(5) });
document.getElementsByClassName("6").onClick = (function() { console.log(6) });
document.getElementsByClassName("7").onClick = (function() { console.log(7) });
document.getElementsByClassName("8").onClick = (function() { console.log(8) });
document.getElementsByClassName("9").onClick = (function() { console.log(9) });

getElementsByClassName returns an HTMLCollection - you can't assign an onclick event to a HTMLCollection (even if it's a single element in that collection, it's still a collection not a single element) — Jaromanda X, Oct 25 '16 at 00:52
Along with that, `onClick` is wrong. JavaScript is case sensitive - `onclick`. — Andrew Li, Oct 25 '16 at 00:53
Iterate over each collections returned, and assign the handler. I'd create a helper function to make this easier. — Carcigenicate, Oct 25 '16 at 00:53
Valid class names cannot start with a digit. You would be better off storing the value in a data-attribute and adding a single on-click to all numbers that pulls off the data attribute. — Alexander Nied, Oct 25 '16 at 00:58

score 0 · Answer 1 · edited May 23 '17 at 12:16

Naming a class with only a number is not valid. See this answer for more information how to name a CSS class.

You can access all your buttons at once with document.querySelectorAll(). For example with .key:

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

With [].forEach.call(buttons, (btn, i) => {}) you can run through the collection. Add the click event to every button with addEventListener().

Example

var buttons = document.querySelectorAll(".key");
[].forEach.call(buttons, (btn, i) => {
  btn.addEventListener("click", function() {
    console.log(i + 1);
  });
})

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

Always think of a loop if you do similar things more often.

score 0 · Answer 2 · answered Oct 25 '16 at 02:52

As has already been stated, a number isn't a valid class name. I would instead use the value attribute, which is valid on a button. I've also added a little check to try and get the numbers to actually return numbers.

HTML

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

JS

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

JavaScript getElementsByClassName

2 Answers2

HTML

JS