Fill a calculator screen with the inner content of a div element

Question

Fill a calculator screen with the inner content of a div element

Currently, I am working on a project where I am using JavaScript to update a calculator's display (.display) based on the numbered button that is clicked.

To achieve this, I am trying to utilize forEach to add a click event listener to each button. This listener will trigger an updateDisplay function which will then update the displayValue variable with the number contained within the div.

Despite my efforts, the code is not functioning as expected and no console errors are being reported. Can anyone offer assistance?

The condensed HTML structure is as follows:

<div class="container">
    <div class="sub-container">
        <div class="display">
            <p id="result-display">
            </p>
        </div>
    <div class="button-grid">
        <div class="item" id="7">
            <p>
            7
            </p>
        </div>

My JavaScript code can be summarized as follows:

//Define variables for display value and display area, initializing the display.
let displayValue = 0;
let displayArea = document.getElementById('result-display');
displayArea.innerHTML += displayValue;

//Update display based on button clicks
const buttons = document.querySelectorAll('.item');
buttons.forEach(button => {
addEventListener('click', () => {
updateDisplay();
})
});

//Function to update displayValue variable  
let updateDisplay = () => {
displayValue = button.innerHTML;
}

javascript html css

Answer 1

Answer №1

One issue you're facing is scoping. Within the loop, you iterate through multiple buttons labeled as button. It may be better to refer to them collectively in the plural form. You then correctly attach an event listener to each one.

I made a slight modification to your code for accessibility reasons. Adding event listeners directly to p may confuse screen readers. By changing the tag to button, many accessibility issues are automatically resolved.

When the event is triggered, we need to determine which specific element was clicked. You could create individual event listener functions for each button, or implement a generic event listener that identifies the clicked button.

Instead of altering the innerHTML of the button itself (which already displays 7), focus on updating the display area with the new value of displayValue. A function like this would be beneficial:


const rerenderCalculatorDisplay = (newValue) => {
  displayArea.innerHTML = newValue;
}

If you want to append to the existing displayValue using +=, you should first retrieve the innerHTML before concatenating. This accounts for scenarios where users input numbers separately such as adding '4 + 4' versus '44'.

A revised version of rerenderCalculatorDisplay might look like this:


const rerenderCalculatorDisplay = (addToDisplay) => {
  if (!isNaN(addToDisplay))
    displayArea.innerHTML = `${displayValue}${addToDisplay}`;
}

Rather than extracting the id from e.target as I did, you could alternatively extract the e.target.innerText.

Alternatively, you could create separate event listeners for each button pressed by the user.

Consider replacing:


const button = document.querySelectorAll('.item');
button.forEach(item => {
  addEventListener('click', () => {
    updateDisplay();
  })

With:


const button = document.querySelectorAll('.item');
button.forEach(item => {
  addEventListener('click', () => {
    updateDisplay(item.id); // specifies which button to update
  })

  const updateDisplay = (valueClicked) => {
    displayValue += valueClicked;
    displayArea.innerText = displayValue; // ensure update is visible to the user
  }

(Container HTML appears here).

Answer 2

One issue you're facing is scoping. Within the loop, you iterate through multiple buttons labeled as button. It may be better to refer to them collectively in the plural form. You then correctly attach an event listener to each one.

I made a slight modification to your code for accessibility reasons. Adding event listeners directly to p may confuse screen readers. By changing the tag to button, many accessibility issues are automatically resolved.

When the event is triggered, we need to determine which specific element was clicked. You could create individual event listener functions for each button, or implement a generic event listener that identifies the clicked button.

Instead of altering the innerHTML of the button itself (which already displays 7), focus on updating the display area with the new value of displayValue. A function like this would be beneficial:


const rerenderCalculatorDisplay = (newValue) => {
  displayArea.innerHTML = newValue;
}

If you want to append to the existing displayValue using +=, you should first retrieve the innerHTML before concatenating. This accounts for scenarios where users input numbers separately such as adding '4 + 4' versus '44'.

A revised version of rerenderCalculatorDisplay might look like this:


const rerenderCalculatorDisplay = (addToDisplay) => {
  if (!isNaN(addToDisplay))
    displayArea.innerHTML = `${displayValue}${addToDisplay}`;
}

Rather than extracting the id from e.target as I did, you could alternatively extract the e.target.innerText.

Alternatively, you could create separate event listeners for each button pressed by the user.

Consider replacing:


const button = document.querySelectorAll('.item');
button.forEach(item => {
  addEventListener('click', () => {
    updateDisplay();
  })

With:


const button = document.querySelectorAll('.item');
button.forEach(item => {
  addEventListener('click', () => {
    updateDisplay(item.id); // specifies which button to update
  })

  const updateDisplay = (valueClicked) => {
    displayValue += valueClicked;
    displayArea.innerText = displayValue; // ensure update is visible to the user
  }

(Container HTML appears here).

Fill a calculator screen with the inner content of a div element

Answer №1

Similar questions

Tips for creating dynamic images in a flexible design

Ways to accomplish a task prior to form submission without relying on preventDefault

Attempting to utilize React Router V5 to display various layout designs

retrieve HTML content from XML document using the correct user input

Having trouble implementing a cookie on the second domain using the first domain. Can't seem to get it to work properly

The function nivoSlider cannot be found in the selected element

The scrolling top value is dynamic when in developer mode

Dynamic Image Toggle Feature with Laravel and Javascript

What is the best way to create a sliding menu that appears from the right side on a mobile device using HTML, CSS, and JQuery

Stack one image on top of another while maintaining their original proportions using HTML and CSS

Effective ways to position images within a card alongside a changing title

The execution of the 'yarn start-https' command encountered an error and exited with code 1

How can JavaScript be used to create text in a textbox?

What is the process for embedding images and text within a nested division element?

Checking for valid usernames using Regex in JavaScript

Angular $resource encounters a 400 Bad Request error when attempting a PUT request, triggering the $resolve and $promise

What is the best way to display a nested JSON object structure?

Issues arise when trying to integrate iframes with Ionic and AngularJS, as they

Implementing Dynamic Weight-based Pricing with CodeIgniter and AJAX

Error: The URL type "workspace:" is not supported: workspace:*