Button doesn't work on click. I have followed a YouTube video, but it doesn't work for me

user_14616296 0
Viewed 51

When I click on a button, the number isn't displayed on the current-output div. This is supposed to be a test if I hooked up the buttons right. Any possible fixes for this? Can it be the problem of using classes? I'm writing the code in vanilla JavaScript.

const numberButtons = Array.from(document.getElementsByClassName('number'));
const previousOutputText = Array.from(document.getElementsByClassName('previous-output'));
const currentOutputText = Array.from(document.getElementsByClassName('current-output'));

class Calculator {
  constructor(previousOutputText, currentOutputText) {
    this.previousOutputText = previousOutputText;
    this.currentOutputText = currentOutputText;
  }

  addNumber(number) {
    this.currentOutput = number;
  }

  updateDisplay() {
    this.currentOutputText.innerHTML = this.currentOutput;
  }
}

const calculator = new Calculator(previousOutputText, currentOutputText);

numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.addNumber(button.innerHTML);
    calculator.updateDisplay();
  })
})
<div class="output">
  <div data-previous-output class="previous-output"></div>
  <div data-current-output class="current-output"></div>
</div>

<button class="span-two all-clear" data-all-clear>AC</button>
<button class="delete" data-delete>DEL</button>
<button class="operation" data-operation>/</button>
<button class="number" data-number>7</button>
<button class="number" data-number>8</button>
<button class="number" data-number>9</button>
<button class="operation" data-operation>*</button>
<button class="number" data-number>4</button>
<button class="number" data-number>5</button>
<button class="number" data-number>6</button>
<button class="operation" data-operation>-</button>
<button class="number" data-number>1</button>
<button class="number" data-number>2</button>
<button class="number" data-number>3</button>
<button class="operation" data-operation>+</button>
<button class="number" data-number>0</button>
<button class="number" data-number>.</button>
<button class="span-two equals" data-equals>=</button>

button html javascript
3 Answers

For your output text, getElementsByClassName returns an HTMLCollection, The fix would be to get the first index of the output elements.

const numberButtons = Array.from(document.getElementsByClassName('number'));
const previousOutputText = document.getElementsByClassName('previous-output')[0];
const currentOutputText = document.getElementsByClassName('current-output')[0];

class Calculator {
    constructor(previousOutputText, currentOutputText) {
        this.previousOutputText = previousOutputText;
        this.currentOutputText = currentOutputText;
    }

    addNumber(number) {
        this.currentOutput = number;
    }

    updateDisplay() {
        this.currentOutputText.innerHTML = this.currentOutput;
    }
}

const calculator = new Calculator(previousOutputText, currentOutputText);

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.addNumber(button.innerHTML);
        calculator.updateDisplay();
    })
})
        <div class="output">
            <div data-previous-output class="previous-output"></div>
            <div data-current-output class="current-output"></div>
        </div>

        <button class="span-two all-clear" data-all-clear>AC</button>
        <button class="delete" data-delete>DEL</button>
        <button class="operation" data-operation>/</button>
        <button class="number" data-number>7</button>
        <button class="number" data-number>8</button>
        <button class="number" data-number>9</button>
        <button class="operation" data-operation>*</button>
        <button class="number" data-number>4</button>
        <button class="number" data-number>5</button>
        <button class="number" data-number>6</button>
        <button class="operation" data-operation>-</button>
        <button class="number" data-number>1</button>
        <button class="number" data-number>2</button>
        <button class="number" data-number>3</button>
        <button class="operation" data-operation>+</button>
        <button class="number" data-number>0</button>
        <button class="number" data-number>.</button>
        <button class="span-two equals" data-equals>=</button>

user_145843050

You didn't provide the script position, and it can be the problem.

Check with this lines that buttons are really found from DOM

console.log('Working on buttons', numberButtons);
numberButtons.forEach(button => {

If they are not presents, move the <script> right before </body>

Then just put some console.log into the click even handler and some of Calculator method will provide you a really simple debug.

user_31263230

Your two arrayFrom for the outputs are wrong

You should delegate

I am not entirely happy with the "this" in your code either

const previousOutputText = document.querySelector('.previous-output');
const currentOutputText = document.querySelector('.current-output');

class Calculator {
  
  constructor(previousOutputText, currentOutputText) {
    this.currentOutput = "";
    this.previousOutputText = previousOutputText;
    this.currentOutputText = currentOutputText;
  }

  addNumber(number) { 
    this.currentOutput = number;
  }

  updateDisplay() { 
    this.currentOutputText.innerHTML = this.currentOutput;
  }
}

const calculator = new Calculator(previousOutputText, currentOutputText);

document.getElementById("container").addEventListener("click",function(e) {
  e.preventDefault(); // or make all buttons type="button"
  const tgt = e.target;
  if (tgt.classList.contains("btn")) {
  calculator.addNumber(tgt.innerHTML);
  calculator.updateDisplay();
  }
})
<div class="output">
  <div data-previous-output class="previous-output">xxx</div>
  <div data-current-output class="current-output">yyy</div>
</div>
<div id="container">
<button class="btn span-two all-clear" data-all-clear>AC</button>
<button class="btn delete" data-delete>DEL</button>
<button class="btn operation" data-operation>/</button>
<button class="btn number" data-number>7</button>
<button class="btn number" data-number>8</button>
<button class="btn number" data-number>9</button>
<button class="btn operation" data-operation>*</button>
<button class="btn number" data-number>4</button>
<button class="btn number" data-number>5</button>
<button class="btn number" data-number>6</button>
<button class="btn operation" data-operation>-</button>
<button class="btn number" data-number>1</button>
<button class="btn number" data-number>2</button>
<button class="btn number" data-number>3</button>
<button class="btn operation" data-operation>+</button>
<button class="btn number" data-number>0</button>
<button class="btn number" data-number>.</button>
<button class="btn span-two equals" data-equals>=</button></div>

user_2957830
Related