使用一个类名分别从多个元素获取文本内容

Question

我正在开发一个计算器作为前端大师课程的一部分，但我无法让数字工作，数字七只能工作。我想知道是否有任何解决方法，因为我认为我也可以为每个按钮编写一个事件监听器，但这会违反 DRY。

const screens = document.querySelector(".screen");
const clearing = document.querySelector(".calc-buttonBigC");
const buttons = document.querySelector(".calc-button");

console.log(screens.textContent);

clearing.addEventListener('click', () =>{
    screens.textContent = "";
});

 buttons.addEventListener('click', () =>{
    screens.textContent += buttons.textContent;
});

<div class='calc'>
  <section class='screen'>
    
  </section>
<section class='calc-buttons'>
<div class='row'>
  <button class='calc-buttonBigC'>C</button>
  <button class='calc-button-spec'>◄</button>
  <button class='calc-button-spec'>/</button>
</div>
  <div class='row'>
       <button class='calc-button'>7</button>
      <button class='calc-button'>8</butbutton>
      <button class='calc-button'>9</button>
      <button class='calc-button-spec'>x</button>
    </div>
  <div class='row'>
      <button class='calc-button'>4</button>
      <button class='calc-button'>5</button>
      <button class='calc-button'>6</button>
      <button class='calc-button-spec'>-</button>
    </div>
    <div class='row'>
      <button class='calc-button'>1</button>
      <button class='calc-button'>2</button>
      <button class='calc-button'>3</button>
      <button class='calc-button-spec'>+</button>
    </div>
  <div class='row'>
      <button class='calc-buttonBig'>0</button>
      <button class='calc-button-spec'>=</button>
    </div>
  </section>
</div>

我已将 querySelector 和 querySelectorAll 与数字一起使用，但我只使用数字 7。

据我了解，我必须使用 for every 循环才能使所有数字发挥作用。

有什么建议吗？

谢谢你。

Answer 1

您正在使用

querySelector(".calc-button")

，它会查找与提供的选择器匹配的 first 元素，该元素是您案例中的 7 按钮。如果您想处理所有按钮，则必须为每个按钮设置一个事件处理程序，或者（最好）使用“事件委托”为所有按钮设置一个处理程序，但随后您将需要可以执行操作的代码

这里有一个让您回到正轨的示例：

const screens = document.querySelector(".screen");
const clearing = document.querySelector(".calc-buttonBigC");

// Get a reference to an ancestor element of all the buttons
const calc = document.querySelector(".calc");

console.log(screens.textContent);

clearing.addEventListener('click', () =>{
    screens.textContent = "";
});

// When any of the descendent elements get clicked,
// the event will bubble up to the ancestor and be
// handled here.
calc.addEventListener('click', function(event){
    // The event reference is automatically passed to
    // the handler and you use the .target property of
    // the event to get a reference to the element that
    // originated the event.
    screens.textContent += event.target.textContent;
});

<div class='calc'>
  <section class='screen'></section>
  <section class='calc-buttons'>
  <div class='row'>
    <button class='calc-buttonBigC'>C</button>
    <button class='calc-button-spec'>◄</button>
    <button class='calc-button-spec'>/</button>
  </div>
  <div class='row'>
      <button class='calc-button'>7</button>
      <button class='calc-button'>8</butbutton>
      <button class='calc-button'>9</button>
      <button class='calc-button-spec'>x</button>
    </div>
  <div class='row'>
      <button class='calc-button'>4</button>
      <button class='calc-button'>5</button>
      <button class='calc-button'>6</button>
      <button class='calc-button-spec'>-</button>
    </div>
    <div class='row'>
      <button class='calc-button'>1</button>
      <button class='calc-button'>2</button>
      <button class='calc-button'>3</button>
      <button class='calc-button-spec'>+</button>
    </div>
  <div class='row'>
      <button class='calc-buttonBig'>0</button>
      <button class='calc-button-spec'>=</button>
    </div>
  </section>
</div>