How can I activate "if" condition on onclick event

user_12917022 0
Viewed 2586

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
onclick javascript
2 Answers

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>

user_13770020

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>

user_106238840
Related