DOM Manipulation, Calculator with Javascript

Question

I was following along an online tutorial and want to show the alert below as soon as one of the numbers 0-9 is clicked.

For whatever reason, it works when I copy and paste the code in here, however I tried the very same code in different browsers (with no ad blockers etc.) and no pop up window was shown. Maybe someone knows why. Thanks for reading or even helping a beginner out!

let operator = document.getElementsByClassName('num');


for(let i = 0; i<operator.length; i++) {
    operator[i].addEventListener('click', function () {
        alert('The operator clicked:'+this.id);
    })
}

body {
    background-color: lightblue;
    height: 100%;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 6 px;
    border: 1px black solid;
    width: 80%;
    
}

.spec, .num {
    border-radius: 50%;
    width: 25 %;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;

}

.spec:active, .num:active {
    font-size: 13px;
}


.inp {
    width: 80%;
    height: 30px;
    margin-bottom: 20px;
    border-radius: 5px;
}

button:nth-child(4n) {
    background-color: lightgray;
}

<!DOCTYPE html>
<html>
<head>
    <title>Calculator on 1308</title>
    <link rel="stylesheet" type="text/css" href="/Users/fab/Downloads/1308/style.css">
    <script src="/Users/fab/Downloads/1308/script.js"></script>
</head>
<body>

    <input type="text" class="inp">
    <div class="container">
        <button class="spec">C</button>
        <button class="spec">CE</button>
        <button class="spec">%</button>
        <button class="spec">/</button>
        <button class="num" id="7">7</button>
        <button class="num" id="8">8</button>
        <button class="num" id="9">9</button>
        <button class="spec">x</button>
        <button class="num" id="4">4</button>
        <button class="num" id="5">5</button>
        <button class="num" id="6">6</button>
        <button class="spec">-</button>
        <button class="num" id="1">1</button>
        <button class="num" id="2">2</button>
        <button class="num" id="3">3</button>
        <button class="spec">+</button>
        <button class="num" id="last_line">0</button>
        <button class="spec" id="last_line">=</button>

    </div>

</body>
</html>

Is there any error in [DevTools console](https://developers.google.com/web/tools/chrome-devtools/console/javascript)? — Jax-p, Aug 13 '20 at 10:09
the path looks like a local path, it should be a relative path — user3732793, Aug 13 '20 at 10:12
@ ThibautM, thank you, that worked! could you maybe explain me, why it does not work when I put it in the ? I do know that javascript and html are not loaded at the same time, however I wonder why it makes problems with a simple alert statement. — Jenny, Aug 13 '20 at 10:15
Duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element). _“I wonder why it makes problems with a simple alert statement”_ — Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Your `alert` is never reached. — Sebastian Simon, Aug 15 '20 at 03:17

score 1 · Accepted Answer · answered Aug 13 '20 at 10:12

1

It should work if you move the script to just above the closing body tag

    <script src="/Users/fab/Downloads/1308/script.js"></script>
</body>

answered Aug 13 '20 at 10:12

fireking-design

361
1
9

julien_ux · Answer 2 · 2020-08-13T14:40:17.200

Another way is to add defer into the script tag. This will prevent the execution of the js file before the html parsing is fully completed.

Your problem is that your parser will start with the html. When it detects a script tag, it will start to parse the js file. When the js parser is faster than the html parser, you will get problems when the js file wants to interact with the dom-tree (html nodes).

What happens if you will the put the script tag at the last possible position is, that everything in the html is already parsed, so there won't be any problems. So basically what 'defer' does.

<head>
    <title>Calculator on 1308</title>
    <link rel="stylesheet" type="text/css" href="/Users/fab/Downloads/1308/style.css">
    <script src="/Users/fab/Downloads/1308/script.js" defer></script>
</head>

For more information: https://www.w3schools.com/tags/att_script_defer.asp

You can prevent this as well when you use window.onload in the js file, which waites for 'the end notification of the html parser' and then executes the assigned function:

window.onload = setup();

function setup() {
    let operator = document.getElementsByClassName('num');


    for (let i = 0; i < operator.length; i++) {
        operator[i].addEventListener('click', function () {
            alert('The operator clicked:' + this.id);
        })
    }
}

DOM Manipulation, Calculator with Javascript

2 Answers2