Event wont trigger in Javascript

Question

I'm trying to do a simple calculator using only Javascript with no frameworks. As I'm trying to implement different type to trigger an event. One event I could not trigger somehow. I want once I press the clear button to clear the text-box and to reset the string behind it but somehow it doesn't work.

var textfield = " ";

function retunNumber(val) {
    console.log(val);
    if (textfield != " ") {
        textfield = textfield + val;
        document.getElementById('result').value = textfield;
    } else if (textfield == " ") {
        textfield = val;
        document.getElementById('result').value = textfield;
    }
}

    document.getElementById('btn').addEventListener("click", function(){
    document.getElementById('result').value= " ";
    textfield = " ";
    });

.grid-container div
{
  display: inline-block;
}

.grid-container div.item1
{
  display: block;
}

<div class="container">

    <div class="grid-container">

        <div class="item1"> <input type="text" name="result" id="result" class="textField"> </div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="1">1</button> </div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="2">2</button> </div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="3">3</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="4">4</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="5">5</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="6">6</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="7">7</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="8">8</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="9">9</button></div>
        <div class="item2"> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="0">0</button></div>
        <div class="item5"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="*">*</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="/">/</button></div>
        <div class="item3"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="+">+</button></div>
        <div class="item4"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="-">-</button></div>
        <div> <button class="btn btn-outline-info">Equal</button></div>
        <div> <button class="btn btn-outline-info">Delete</button></div>
        <div> <button class="btn btn-outline-info" id="btn">Clear</button></div>


    </div>

</div>

Any suggestion on improvement will be much welcome.

there isn't any click event listener on your clear button, or you don't showing it to us. — samb102, Mar 13 '19 at 17:46
It works for me. The click event listener is added at the end of the JS. I inserted the code as a snippet, with some css formatting to make it easier to hit the clear button after pressing buttons. — ps2goat, Mar 13 '19 at 17:51
@Oakar it did not work as what it was I got to move the script after the button as Nicholas suggestion — AbdallahRizk, Mar 13 '19 at 21:34

score 1 · Accepted Answer · answered Mar 13 '19 at 17:59

You are calling document.getElementById directly in your javascript. This will only work if you put your script at the end of your page, instead of the start of your page, which is where I'm guessing you put it. This is because the javascript at the top of your page is run before the actual elements exist, so it can't find them.

Alternatively, you can use one of the vanilla alternatives to jQuery's $(document).ready from this question.

Event wont trigger in Javascript

1 Answers1