如何在 onclick 事件上激活“if”条件

Question

I seem not to be able to figure out why my "if" part of the function is not working on onclick event. I am trying to make a function to execute on onclick in HTML, it executes it but I always get "undefined" as a result...

My HTML is:

<button type="button" id="n1" class="btn btn-secondary btn-decor" onclick="pressNumber()">1</button>
                <button type="button" id="n2" class="btn btn-secondary btn-decor" onclick="pressNumber()">2</button>

and Javascript

var displayedValue = document.getElementById("calc-disp").textContent;

var fullNumber;

function pressNumber () {
    if (document.getElementById("n1")) {
        var fullNumber = displayedValue + numbers[1];
    }
    else if (document.getElementById("n2")) {
        var fullNumber = displayedValue + numbers[2];
    }
    displayValueNow();
}

// display result

function displayValueNow () {
    document.getElementById("calc-disp").innerHTML = fullNumber;
}```

thanks for any advice

Answer 1

Instead of using an if statement simply pass in the button number as an argument to the function and use that in your calculation.

 const numbers = [0, 1, 2]; // Cache only the element const displayedValue = document.getElementById('calc-disp'); function displayValueNow(fullNumber) { displayedValue.textContent = fullNumber; } function pressNumber(n) { // Make sure you coerce your displayed value (a string) to // an integer before trying to add it to the number in the array var fullNumber = Number(displayedValue.textContent) + numbers[n]; // Pass in `fullNumber` as an argument to `displayValueNow` // so you're not using a global variable displayValueNow(fullNumber); }

 <button type="button" onclick="pressNumber(1)">1</button> <button type="button" onclick="pressNumber(2)">2</button> <div id="calc-disp"></div>

Answer 2

You were close, the if condition didn't work because your statement checked IF the element exists, not whether it was clicked on. To do that, pass a param to your pressNumber function from your html (here I pass the button, you could pass the id directly or the value of the number).

 // declare your numbers array var numbers = [1, 2] // +so that it's a number not a string (try removing it) var fullNumber = +document.getElementById("calc-disp").textContent; // removed, we should only operate on the fullNumber variable // var displayedValue = document.getElementById("calc-disp").textContent; function pressNumber(button) { // in an if, document.getElementById("n1") just checks if the element exists - since it always exists, the else branch will never be executed if (button.id === "n1") { // remove the var so it changes the outer fullNumber fullNumber = fullNumber + numbers[0]; } else if (button.id === "n2") { fullNumber = fullNumber + numbers[1]; } displayValueNow(); } // display result function displayValueNow() { document.getElementById("calc-disp").innerHTML = fullNumber; }

 <button type="button" id="n1" class="btn btn-secondary btn-decor" onclick="pressNumber(this)">1</button> <button type="button" id="n2" class="btn btn-secondary btn-decor" onclick="pressNumber(this)">2</button> <div id="calc-disp">0</div>