Calculator display showing empty spaces instead of numbers

Question

Calculator display showing empty spaces instead of numbers

I'm currently working on developing a calculator, but I've hit a roadblock that I can't seem to overcome. The numbers aren't appearing in the calculator window when I click them.

I've been struggling with understanding query selectors and event listeners, so it's likely that I've made a mistake somewhere in my JavaScript code.

I've set up a query selector targeting the .window-content class and initialized the windowValue variable as an empty string. Additionally, I've implemented an Event Listener on the container housing the calculator to listen for clicks.

The problematic code snippet is displayed below:

const screen = document.querySelector(".window-content");
let windowValue = ""; 
document.querySelector(".container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName !== "button") return;

  let buttonText = tgt.innerText; 
    if (buttonText == 'X') { 
      buttonText = '*';
      windowValue += buttonText;
      screen.value = windowValue;
    } else if (buttonText == 'CA') { 
      windowValue = "";
      screen.value = windowValue;
    } else if (buttonText == '🡄') { 
      windowValue = windowValue.slice(0,-1);
      screen.value = windowValue;
    } else if (buttonText == '=') { 
      screen.value = operate(firstNum, secondNum, operator);
      windowValue = screen.value;
      firstNum = "";
      operator = "";
      secondNum = "";
    } else if (buttonText.match(/[0-9]/)) { 
      windowValue += buttonText; 
      screen.value = windowValue;
    } else { 
      firstNum = windowValue;
      operator = buttonText;
      windowValue = "";
      windowValue += buttonText;
    windowContent.innerText = windowValue;
    }
})

javascript project calculator addeventlistener queryselector

Answer 1

Answer №1

It seems like the issue lies in using querySelector; as it applies addEventListener only to the first element with the class .container, instead of all elements. Simply replace it with querySelectorAll and implement a loop to add the click event to all button elements.

const screen = document.querySelector(".window-content");
let windowValue = ""; 
[...document.querySelectorAll(".container")].forEach(function (container) {
  container.addEventListener("click", function(e) {
    const tgt = e.target;
    console.log(tgt);
    //if (tgt.tagName !== "button") return;

    let buttonText = tgt.innerText; 
    console.log(buttonText);
    if (buttonText == 'X') { 
      buttonText = '*';
      windowValue += buttonText;
      screen.value = windowValue;
    } else if (buttonText == 'CA') { 
      windowValue = "";
      screen.value = windowValue;
    } else if (buttonText == '🡄') { 
      windowValue = windowValue.slice(0,-1);
      screen.value = windowValue;
    } else if (buttonText == '=') { 
      screen.value = operate(firstNum, secondNum, operator);
      windowValue = screen.value;
      firstNum = "";
      operator = "";
      secondNum = "";
    } else if (buttonText.match(/[0-9]/)) { 
      windowValue += buttonText; 
      screen.value = windowValue;
    } else { 
      firstNum = windowValue;
      operator = buttonText;
      windowValue = "";
      windowValue += buttonText;
      windowContent.innerText = windowValue;
    }
  });
});

.btn {
  display: flex;
}

.container {
  display: inline-block;
}

<div class="btn">
  <button class="container">X</button>
  <button class="container">CA</button>
  <button class="container">🡄</button>
  <button class="container">=</button>
  <button class="container">1</button>
  <button class="container">2</button>
  <button class="container">3</button>
  <button class="container">4</button>
  <button class="container">5</button>
  <button class="container">6</button>
  <button class="container">7</button>
  <button class="container">8</button>
  <button class="container">9</button>
  <button class="container">0</button>
</div>
<br />
<textarea class="window-content"></textarea>

Answer 2

It seems like the issue lies in using querySelector; as it applies addEventListener only to the first element with the class .container, instead of all elements. Simply replace it with querySelectorAll and implement a loop to add the click event to all button elements.

const screen = document.querySelector(".window-content");
let windowValue = ""; 
[...document.querySelectorAll(".container")].forEach(function (container) {
  container.addEventListener("click", function(e) {
    const tgt = e.target;
    console.log(tgt);
    //if (tgt.tagName !== "button") return;

    let buttonText = tgt.innerText; 
    console.log(buttonText);
    if (buttonText == 'X') { 
      buttonText = '*';
      windowValue += buttonText;
      screen.value = windowValue;
    } else if (buttonText == 'CA') { 
      windowValue = "";
      screen.value = windowValue;
    } else if (buttonText == '🡄') { 
      windowValue = windowValue.slice(0,-1);
      screen.value = windowValue;
    } else if (buttonText == '=') { 
      screen.value = operate(firstNum, secondNum, operator);
      windowValue = screen.value;
      firstNum = "";
      operator = "";
      secondNum = "";
    } else if (buttonText.match(/[0-9]/)) { 
      windowValue += buttonText; 
      screen.value = windowValue;
    } else { 
      firstNum = windowValue;
      operator = buttonText;
      windowValue = "";
      windowValue += buttonText;
      windowContent.innerText = windowValue;
    }
  });
});

.btn {
  display: flex;
}

.container {
  display: inline-block;
}

<div class="btn">
  <button class="container">X</button>
  <button class="container">CA</button>
  <button class="container">🡄</button>
  <button class="container">=</button>
  <button class="container">1</button>
  <button class="container">2</button>
  <button class="container">3</button>
  <button class="container">4</button>
  <button class="container">5</button>
  <button class="container">6</button>
  <button class="container">7</button>
  <button class="container">8</button>
  <button class="container">9</button>
  <button class="container">0</button>
</div>
<br />
<textarea class="window-content"></textarea>

Calculator display showing empty spaces instead of numbers

Answer №1

Similar questions

When adding another Mesh, an error occurs in three.js stating: "Uncaught TypeError: Cannot read property 'center' of undefined - three.js:6754."

What could be the reason for the malfunction of the "includes" function in my JavaScript snake game

Displaying time text in input element due to browser bug

Is there a "Read more" link to expand the content on the page?

Preventing Bootstrap 4 slider images from shifting position when using background-attachment:fixed for a parallax effect

Resolving DataTables Error

What is the reason for having a filled array containing data on currency exchange rates within an asynchronous function, while simultaneously having an empty array located outside of it? - React

Encountering a theme issue in the makeStyles function within Material-UI version 5

experimenting with a TypeScript annotation

Executing a protractor test on Safari results in the message "Angular was not located on the webpage https://angularjs.org/"

Why is it that the "await" keyword lacks the ability to truly await?

Maintain your position on the current page when refreshing Angular 4

Is it possible to turn off security features for a Heroku Postgres database?

Embedding a PDF file into an HTML form

The setTimeout function executes immediately without any delay

Synchronizing client information in real-time: tips, tricks, and expert advice

Troubleshooting Issue with Bootstrap 4 Modal Varying Content Display

Removing duplicates from a multidimensional array by comparing the first element in each subarray using Javascript

Tips for safeguarding the JSON data being transmitted from the AJAX file to jqGrid

Load data from a file into a dropdown menu using node.js