CODEWITHSUNDEEP
javascripthtml
Parham
Parham

Reputation: 224

How do I remove the 0 once a button is clicked?

For example, when I click either 1 or 2 the 0 in the display will be overwritten with the button clicked.

let display = document.querySelector('.display');

let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) {
  numberButtons.addEventListener('click', showNumber)

  function showNumber() {
    display.innerHTML += numberButtons.innerHTML
  }
});
<body>
  <div class='container'>
    <div class="display">0</div>
    <button class='number' id='one'>1</button>
    <button class='number' id="two">2</button>
  </div>
</body>

Upvotes: 1

Views: 65

Answers (3)

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

you can simply add an if statement states that if there is 0 in the display remove it before adding anything like if (display.textContent == 0){display.innerHTML = "";} just the following

Example

let display = document.querySelector('.display');

let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) {
  numberButtons.addEventListener('click', showNumber)

  function showNumber() {
    if (display.textContent == 0){
      display.innerHTML = "";
    }
    display.innerHTML += numberButtons.innerHTML;
  }
});
<body>
  <div class='container'>
    <div class="display">0</div>
    <button class='number' id='one'>1</button>
    <button class='number' id="two">2</button>
  </div>
</body>

Or simply if you want to overwrite everything means that before adding anything in the DOM just remove everthing you can simply try the following

Example

let display = document.querySelector('.display');

let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) {
  numberButtons.addEventListener('click', showNumber)

  function showNumber() {
    display.innerHTML = "";
    display.innerHTML += numberButtons.innerHTML;
  }
});
<body>
  <div class='container'>
    <div class="display">0</div>
    <button class='number' id='one'>1</button>
    <button class='number' id="two">2</button>
  </div>
</body>

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42044

I still need the +=, but at the same time, I don't want the 0 to appear after I click the buttons.

You can check if display.innerHTML is 0. So can decide if concatenate or substitute the string.

let display = document.querySelector('.display');

let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) {
    numberButtons.addEventListener('click', showNumber)

    function showNumber() {
        if (display.innerHTML == '0') {
            display.innerHTML = numberButtons.innerHTML
        } else {
            display.innerHTML += numberButtons.innerHTML
        }
    }
});
<div class='container'>
    <div class="display">0</div>
    <button class='number' id='one'>1</button>
    <button class='number' id="two">2</button>
</div>

Upvotes: 1

trincot
trincot

Reputation: 350137

It seems your button texts are always numericals, and that the displayed result should be the number formed by those digits.

You can convert the result to number (using unary +) and assign that:

display.textContent = +(display.textContent + numberButtons.textContent)

NB: it is better practice to reserve the use of innerHTML for when you need to support HTML encoded strings. Otherwise use textContent.

let display = document.querySelector('.display');

let numberButtons = document.querySelectorAll('.number').forEach(function(numberButtons) {
  numberButtons.addEventListener('click', showNumber)

  function showNumber() {
    display.innerHTML = +(display.innerHTML + numberButtons.innerHTML);
  }
});
<div class='container'>
  <div class="display">0</div>
  <button class='number' id='one'>1</button>
  <button class='number' id="two">2</button>
</div>

Upvotes: 1

Related Questions