Question 412003 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I'm trying to use a for loop to increment through multiple button elements so I can assign different actions to them

I cannot figure this out, Here is the code,
I am very much new to javascript and I’ve read through MDN docs and haven’t come up with anything.

let numberOfbuttons = document.querySelectorAll(".numbers");

for (i = 0; i < numberOfbuttons; i++) {
  document.querySelectorAll(".numbers")[i].addEventListener("click", function() {
    document.querySelector(".result").innerHTML = "1"
  })
};
body {
  background-color: blanchedalmond;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.Calc {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-area: 2/2;
}

button[value="0"] {
  grid-area: 5/2/5/2;
}

button {
  background-color: aliceblue;
  color: black;
}

button[value="AC"] {
  grid-area: 5/1;
}

button[value="+"] {
  grid-area: 3/4;
}

button[value="-"] {
  grid-area: 2/4;
}

.result {
  grid-area: 1/1/1/5;
  background-color: #CBD2A4;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>Calculator</title>
  <link rel="stylesheet" href="styles.css" />
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" />
</head>

<body>
  <div class="Calc">
    <div class="result">
      <p>Type in your "numbers"</p>
    </div>

    <button class="numbers">1</button>
    <button class="numbers">2</button>
    <button class="numbers">3</button>
    <button class="numbers">4</button>
    <button class="numbers">5</button>
    <button class="numbers">6</button>
    <button class="numbers">7</button>
    <button class="numbers">8</button>
    <button class="numbers">9</button>
    <button class="numbers">0</button>
    <button value="AC">AC</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">x</button>
    <button value="/">/</button>
    <button value="=">=</button>
  </div>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>
Tags:

2

Answers


  1. 0

    You’re almost there. querySelector returns a list, not its length. You can try this:

    let buttons = document.querySelectorAll(".numbers");

for(i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click",function(){
document.querySelector(".result").innerHTML= "1"
  })
};
    body {
    background-color: blanchedalmond;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.Calc{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-area: 2/2;
}
button[value="0"]{
    grid-area: 5/2/5/2;
}
button{
    background-color: aliceblue;
    color: black;
}
button[value="AC"]{
    grid-area:5/1;
}
button[value="+"]{
    grid-area: 3/4;
}
button[value="-"]{
    grid-area: 2/4;
}
.result{
    grid-area: 1/1/1/5;
    background-color: #CBD2A4;
    text-align:center;
}
    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Arvo"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="Calc">
      <div class="result"><p>Type in your "numbers"</p></div>

      <button class="numbers" >1</button>
      <button class="numbers" >2</button>
      <button class="numbers" >3</button>
      <button class="numbers" >4</button>
      <button class="numbers" >5</button>
      <button class="numbers" >6</button>
      <button class="numbers" >7</button>
      <button class="numbers" >8</button>
      <button class="numbers" >9</button>
      <button class="numbers" >0</button>
      <button value="AC">AC</button>
      <button value="+">+</button>
      <button value="-">-</button>
      <button value="*">x</button>
      <button value="/">/</button>
      <button value="=">=</button>
    </div>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Just as an exercise, I made the code more complete and changed the approach a little (to show another way to achieve the same result) and added a little thing.

    const numericButtons = document.querySelectorAll(".numbers");
const resultDisplay = document.querySelector(".result");
const originalDisplay = resultDisplay.textContent;

for ( aButton of numericButtons )
{
  aButton.addEventListener
  (
    "click", clickEvent =>
    {
      if ( resultDisplay.textContent == originalDisplay )
      {
        resultDisplay.textContent = '';
      }
      
      // The `result` class content receives the button content additionally.
      resultDisplay.textContent += clickEvent.target.textContent;
    }
  )
};

// Just adding the behaviour of the `AC` button.
document.querySelector("[value=AC]").addEventListener
(
  "click", clickEvent =>
  {
    resultDisplay.textContent = originalDisplay;
  }
);
    body {
    background-color: blanchedalmond;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.Calc{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-area: 2/2;
}
button[value="0"]{
    grid-area: 5/2/5/2;
}
button{
    background-color: aliceblue;
    color: black;
}
button[value="AC"]{
    grid-area:5/1;
}
button[value="+"]{
    grid-area: 3/4;
}
button[value="-"]{
    grid-area: 2/4;
}
.result{
    grid-area: 1/1/1/5;
    background-color: #CBD2A4;
    text-align:center;
}
    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Arvo"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="Calc">
      <div class="result"><p>Type in your "numbers"</p></div>

      <button class="numbers" >1</button>
      <button class="numbers" >2</button>
      <button class="numbers" >3</button>
      <button class="numbers" >4</button>
      <button class="numbers" >5</button>
      <button class="numbers" >6</button>
      <button class="numbers" >7</button>
      <button class="numbers" >8</button>
      <button class="numbers" >9</button>
      <button class="numbers" >0</button>
      <button value="AC">AC</button>
      <button value="+">+</button>
      <button value="-">-</button>
      <button value="*">x</button>
      <button value="/">/</button>
      <button value="=">=</button>
    </div>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search