The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

Question

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox.

You can view my code on this codepen:

<div class="wrapper">
  <div class="calheader">
      <h2>Simple Calculator</h2>
    </div>
  <div class="calculatorbox">
    <div class="calwindow">
      <!-- ENTRY BOX -->
     <div class="entry">
        <p id="answer"></p>
      </div>
      <div class="entryhistory">
        <p id="history"></p>
      </div>
    </div>
    <!-- BUTTONS \\-->
    <div class="calbuttons">
      <div class="row">
        <button id="clear" class="key topcolor" value="clear">C</button>
        <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
        <button class="key topcolor" value="%">%</button>
        <button id="divide" class="key orange" value="/">÷</button>
      </div>
      <div class="row">
        <button id="seven" class="key" value="7">7</button>
        <button id="eight" class="key" value="8">8</button>
        <button id="nine" class="key" value="9">9</button>
        <button id="multiply" class="key orange" value="*">×</button>
      </div>
      <div class="row">
        <button id="four" class="key" value="4">4</button>
        <button id="five" class="key" value="5">5</button>
        <button id="six" class="key" value="6">6</button>
        <button id="subtract" class="key orange" value="-">−</button>
      </div>
      <div class="row">
        <button id="one" class="key" value="1">1</button>
        <button id="two" class="key" value="2">2</button>
        <button id="three" class="key" value="3">3</button>
        <button id="add" class="key orange" value="+">+</button>
      </div>
      <div class="row">
        <button id="zero" class="key btnspan" value="0">0</button>
        <button id="decimal" class="key" value=".">.</button>
        <button id="equals" class="key orange" value="=">=</button>
      </div>
    </div>
  </div>
</div>

Currently, I am exploring how to individually select and apply the addEventListener function to each button element.

A different JavaScript tutorial I came across utilizes a simpler structure as shown below:

<div class="calculator-keys">
    
    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">&times;</button>
    <button type="button" class="operator" value="/">&divide;</button>

    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>


    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>


    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>


    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>

    <button type="button" class="equal-sign operator" value="=">=</button>

  </div>

The tutorial goes on to illustrate how to interact with these elements using JavaScript:

const keys = document.querySelector('.calculator-keys');

keys.addEventListener('click', (event) => {
  const { target } = event;
  console.log('digit', target.value);
});

In this context, the querySelector method is utilized to target all children within the calculator-keys class for interaction.

In my situation, I was able to implement this functionality only for the first row of buttons. If I proceed to use querySelectorAll, would it be necessary to employ .map(), .forEach(), or some other technique to effectively utilize addEventListener for each individual button?

javascript html css

Answer 1

Answer №1

querySelector only retrieves one element at a time, so you should utilize querySelectorAll instead. To accomplish this, you need to target all elements with the class key and then attach an event listener for each key.

 const keys = document.querySelectorAll('.key');

keys.forEach(item => {
 item.addEventListener('click', (event) => {
    const { target } = event;
    console.log('digit', target.value);
    });
});

<div class="wrapper">
  <div class="calheader">
      <h2>Simple Calculator</h2>
    </div>
  <div class="calculatorbox">
    <div class="calwindow">
      <!-- ENTRY BOX -->
     <div class="entry">
        <p id="answer"></p>
      </div>
      <div class="entryhistory">
        <p id="history"></p>
      </div>
    </div>
    <!-- BUTTONS \\-->
    <div class="calbuttons">
      <div class="row">
        <button id="clear" class="key topcolor" value="clear">C</button>
        <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
        <button class="key topcolor" value="%">%</button>
        <button id="divide" class="key orange" value="/">÷</button>
      </div>
      <div class="row">
        <button id="seven" class="key" value="7">7</button>
        <button id="eight" class="key" value="8">8</button>
        <button id="nine" class="key" value="9">9</button>
        <button id="multiply" class="key orange" value="*">×</button>
      </div>
      <div class="row">
        <button id="four" class="key" value="4">4</button>
        <button id="five" class="key" value="5">5</button>
        <button id="six" class="key" value="6">6</button>
        <button id="subtract" class="key orange" value="-">−</button>
      </div>
      <div class="row">
        <button id="one" class="key" value="1">1</button>
        <button id="two" class="key" value="2">2</button>
        <button id="three" class="key" value="3">3</button>
        <button id="add" class="key orange" value="+">+</button>
      </div>
      <div class="row">
        <button id="zero" class="key btnspan" value="0">0</button>
        <button id="decimal" class="key" value=".">.</button>
        <button id="equals" class="key orange" value="=">=</button>
      </div>
    </div>
  </div>
</div>

Answer 2

querySelector only retrieves one element at a time, so you should utilize querySelectorAll instead. To accomplish this, you need to target all elements with the class key and then attach an event listener for each key.

 const keys = document.querySelectorAll('.key');

keys.forEach(item => {
 item.addEventListener('click', (event) => {
    const { target } = event;
    console.log('digit', target.value);
    });
});

<div class="wrapper">
  <div class="calheader">
      <h2>Simple Calculator</h2>
    </div>
  <div class="calculatorbox">
    <div class="calwindow">
      <!-- ENTRY BOX -->
     <div class="entry">
        <p id="answer"></p>
      </div>
      <div class="entryhistory">
        <p id="history"></p>
      </div>
    </div>
    <!-- BUTTONS \\-->
    <div class="calbuttons">
      <div class="row">
        <button id="clear" class="key topcolor" value="clear">C</button>
        <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
        <button class="key topcolor" value="%">%</button>
        <button id="divide" class="key orange" value="/">÷</button>
      </div>
      <div class="row">
        <button id="seven" class="key" value="7">7</button>
        <button id="eight" class="key" value="8">8</button>
        <button id="nine" class="key" value="9">9</button>
        <button id="multiply" class="key orange" value="*">×</button>
      </div>
      <div class="row">
        <button id="four" class="key" value="4">4</button>
        <button id="five" class="key" value="5">5</button>
        <button id="six" class="key" value="6">6</button>
        <button id="subtract" class="key orange" value="-">−</button>
      </div>
      <div class="row">
        <button id="one" class="key" value="1">1</button>
        <button id="two" class="key" value="2">2</button>
        <button id="three" class="key" value="3">3</button>
        <button id="add" class="key orange" value="+">+</button>
      </div>
      <div class="row">
        <button id="zero" class="key btnspan" value="0">0</button>
        <button id="decimal" class="key" value=".">.</button>
        <button id="equals" class="key orange" value="=">=</button>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Event delegation in the DOM refers to handling events that bubble up from multiple elements. This approach simplifies code, particularly when adding or removing elements, and also helps conserve memory.

Here are some examples of event delegation:

If you're using Javascript and have a list of buttons with the class 'key', you can utilize the following code snippet to attach an EventListener to each button.

let buttons = document.getElementsByClassName('key');
for(let i = 0; i<buttons.length; i++){
   buttons[i].addEventListener('click', () => {
      /*add your code here*/
   });
}

Answer 4

Event delegation in the DOM refers to handling events that bubble up from multiple elements. This approach simplifies code, particularly when adding or removing elements, and also helps conserve memory.

Here are some examples of event delegation:

If you're using Javascript and have a list of buttons with the class 'key', you can utilize the following code snippet to attach an EventListener to each button.

let buttons = document.getElementsByClassName('key');
for(let i = 0; i<buttons.length; i++){
   buttons[i].addEventListener('click', () => {
      /*add your code here*/
   });
}

Answer 5

Answer №3

To convert a NodeList to an array using querySelectoAll, you can iterate through the buttons and add an eventListener.

let buttons = document.querySelectorAll('.btn');
let arrButtons = Array.from(buttons);

console.log(arrButtons)

for(button of arrButtons){
  button.addEventListener('click', () => {
    console.log('event');
  })
}

<button class="btn">Go!</button>
<button class="btn">Go!</button>
<button class="btn">Go!</button>
<button class="btn">Go!</button>

Answer 6

To convert a NodeList to an array using querySelectoAll, you can iterate through the buttons and add an eventListener.

let buttons = document.querySelectorAll('.btn');
let arrButtons = Array.from(buttons);

console.log(arrButtons)

for(button of arrButtons){
  button.addEventListener('click', () => {
    console.log('event');
  })
}

<button class="btn">Go!</button>
<button class="btn">Go!</button>
<button class="btn">Go!</button>
<button class="btn">Go!</button>

Answer 7

Answer №4

A highly recommended approach is to utilize event delegation. By doing so, you avoid the need to individually attach event listeners to each button and instead only attach it to their parent container.

const calcKeys = document.querySelector(".calculator-keys");

// Event listener only added to the parent container
calcKeys.addEventListener("click", (event) => {

  // Ignoring clicks from non-button elements
  if (event.target.nodeName !== "BUTTON") return;

  console.log(event.target.value);
});

<div class="calculator-keys">
  <button type="button" class="operator" value="+">+</button>
  <button type="button" class="operator" value="-">-</button>
  <button type="button" class="operator" value="*">&times;</button>
  <button type="button" class="operator" value="/">&divide;</button>

  <button type="button" value="7">7</button>
  <button type="button" value="8">8</button>
  <button type="button" value="9">9</button>

  <button type="button" value="4">4</button>
  <button type="button" value="5">5</button>
  <button type="button" value="6">6</button>

  <button type="button" value="1">1</button>
  <button type="button" value="2">2</button>
  <button type="button" value="3">3</button>

  <button type="button" value="0">0</button>
  <button type="button" class="decimal" value=".">.</button>
  <button type="button" class="all-clear" value="AC">AC</button>

  <button type="button" class="equal-sign operator" value="=">=</button>
</div>

Answer 8

A highly recommended approach is to utilize event delegation. By doing so, you avoid the need to individually attach event listeners to each button and instead only attach it to their parent container.

const calcKeys = document.querySelector(".calculator-keys");

// Event listener only added to the parent container
calcKeys.addEventListener("click", (event) => {

  // Ignoring clicks from non-button elements
  if (event.target.nodeName !== "BUTTON") return;

  console.log(event.target.value);
});

<div class="calculator-keys">
  <button type="button" class="operator" value="+">+</button>
  <button type="button" class="operator" value="-">-</button>
  <button type="button" class="operator" value="*">&times;</button>
  <button type="button" class="operator" value="/">&divide;</button>

  <button type="button" value="7">7</button>
  <button type="button" value="8">8</button>
  <button type="button" value="9">9</button>

  <button type="button" value="4">4</button>
  <button type="button" value="5">5</button>
  <button type="button" value="6">6</button>

  <button type="button" value="1">1</button>
  <button type="button" value="2">2</button>
  <button type="button" value="3">3</button>

  <button type="button" value="0">0</button>
  <button type="button" class="decimal" value=".">.</button>
  <button type="button" class="all-clear" value="AC">AC</button>

  <button type="button" class="equal-sign operator" value="=">=</button>
</div>

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adhering button for sliding side panel

Update a separate React component in response to the interaction with a different React component

Utilize pg-promise for inserting data with customized formatting using the placeholders :name and :

Tips for seamlessly embedding Youtube iframes within Angular2 components. Resolving issues with unsafe value errors

The second jQueryUI datepicker instance flickers and vanishes when the show() function is triggered

Error: The reference to 'ko' is not defined while loading with jQuery

Tips for confirming date is earlier than current date in Reactjs?

Utilizing a dictionary for comparing with an API response in order to generate an array of unique objects by eliminating duplicates

tips on utilizing the JSON information transmitted from the backend

Node.js Binary Search Tree - Error: Identifier Not Found

Python Selenium : Struggling to locate element using ID "principal"

Is there a way to handle the 'No tables found' error when using pd.read_html?

Obtain text content using JQuery and AJAX rather than retrieving the value

The AngularJS 2 TypeScript application has been permanently relocated

The image is experiencing difficulty loading from the Express static directory

execute the code when the device is not an iPad

Is there a way to integrate jQuery and Javascript into a Firefox add-on?

How to display only the thumbnail on WordPress archive page and remove the post excerpt

Design a layout featuring an array of boxes in varied sizes

What are the steps to integrate MaterializeCss into Vue.js?