我正在尝试使用 for 循环来递增多个按钮元素，以便我可以为它们分配不同的操作

问题描述 投票：0回答：1

我无法弄清楚这一点，这是代码， 我对 javascript 非常陌生，我已经阅读了 MDN 文档，但没有提出任何建议。

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>

javascript arrays for-loop addeventlistener
1个回答
0
投票

你就快到了。 

querySelector
返回一个列表，而不是其长度。你可以试试这个：

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.