Question

我想创建一个函数，该函数根据单击的按钮将文本添加到空div中

我正在将计算器作为我的初学者javascript项目之一（我知道我可以只使用输入和“ button”标签，但我觉得这会变得更加原始且更具挑战性）。我正在尝试将事件添加到queryselector所有节点列表中的所有元素中，我觉得我的函数是正确的，我已经尽力了，但是代码似乎没有用，任何帮助都将不胜感激。 / p>

我正在尝试创建一种类似input div的方法，以反映单击列表项的值或文本

let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");

for (let i = 0; i < digits.length; i++) {
  digits[i].addEventListener("click", function() {
    add.innerHTML += digits[i].innerHTML
  });
  digits[i].value = [i];
};

<div class="container">
  <div class="camper">
    <h3 id="insert"></h3>
  </div>
  <div class="right-box">
    <ul>
      <li>
        <h3 id="equal">=</h3>
      </li>
      <li>
        <h3 id="plus">+</h3>
      </li>
      <li>
        <h3 id="minus">-</h3>
      </li>
      <li>
        <h3 id="multiply">x</h3>
      </li>
      <li>
        <h3 id="divide">\</h3>
      </li>
    </ul>
  </div>
  <div class="write-box">
    <ul>
      <li class="digit">
        <h3>1</h3>
      </li>
      <li class="digit">
        <h3>2</h3>
      </li>
      <li class="digit">
        <h3>3</h3>
      </li>
      <li class="digit">
        <h3>4</h3>
      </li>
      <li class="digit">
        <h3>5</h3>
      </li>
      <li class="digit">
        <h3>6</h3>
      </li>
      <li class="digit">
        <h3>7</h3>
      </li>
      <li class="digit">
        <h3>8</h3>
      </li>
      <li class="digit">
        <h3>9</h3>
      </li>
      <li class="digit">
        <h3>0</h3>
      </li>
      <li>
        <h3>clear</h3>
      </li>
      <li>
        <h3>bkspc</h3>
      </li>
    </ul>
  </div>

</div>

Answer 1

错别字

如果要使用getElementById，则为id="camper"，而不是class="camper"，但您可能希望使用insert而不是camper
它是querySelectorAll(".digit")-您在类选择器中遗漏了点

逻辑

使用this.innerText获取数字的内容

let digits = document.querySelectorAll(".digit");
let add = document.getElementById("insert");

for (let i = 0; i < digits.length; i++) {
  digits[i].addEventListener("click", function() {
    add.innerHTML += this.innerText;
  });
};

<div class="container">
  <div class="camper">
    <h3 id="insert"></h3>
  </div>
  <div class="right-box">
    <ul>
      <li>
        <h3 id="equal">=</h3>
      </li>
      <li>
        <h3 id="plus">+</h3>
      </li>
      <li>
        <h3 id="minus">-</h3>
      </li>
      <li>
        <h3 id="multiply">x</h3>
      </li>
      <li>
        <h3 id="divide">\</h3>
      </li>
    </ul>
  </div>
  <div class="write-box">
    <ul>
      <li class="digit">
        <h3>1</h3>
      </li>
      <li class="digit">
        <h3>2</h3>
      </li>
      <li class="digit">
        <h3>3</h3>
      </li>
      <li class="digit">
        <h3>4</h3>
      </li>
      <li class="digit">
        <h3>5</h3>
      </li>
      <li class="digit">
        <h3>6</h3>
      </li>
      <li class="digit">
        <h3>7</h3>
      </li>
      <li class="digit">
        <h3>8</h3>
      </li>
      <li class="digit">
        <h3>9</h3>
      </li>
      <li class="digit">
        <h3>0</h3>
      </li>
      <li>
        <h3>clear</h3>
      </li>
      <li>
        <h3>bkspc</h3>
      </li>
    </ul>
  </div>

</div>

这是一种更优雅的方式-如果您正在做作业，那么在看:)之前可能需要做更多的编码

let add = document.getElementById("insert");

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.tagName==="H3") {
    const text = tgt.innerText;
    const cn = tgt.parentNode.className;
    if (cn === "digit" || cn === "oper") add.innerText += text;
    else if (cn==="action") {
      if (text === "clear") {
        add.innerText = "";
      }  
      else if (text === "bkspc") {
        add.innerText = add.innerText.slice(0,-1);
      }  
    }
  }
})

<div id="container">
  <div class="camper">
    <h2 id="insert"></h2>
  </div>
  <div class="right-box">
    <ul>
      <li class="oper">
        <h3 id="equal">=</h3>
      </li>
      <li class="oper">
        <h3 id="plus">+</h3>
      </li>
      <li class="oper">
        <h3 id="minus">-</h3>
      </li>
      <li class="oper">
        <h3 id="multiply">x</h3>
      </li>
      <li class="oper">
        <h3 id="divide">\</h3>
      </li>
    </ul>
  </div>
  <div class="write-box">
    <ul>
      <li class="digit">
        <h3>1</h3>
      </li>
      <li class="digit">
        <h3>2</h3>
      </li>
      <li class="digit">
        <h3>3</h3>
      </li>
      <li class="digit">
        <h3>4</h3>
      </li>
      <li class="digit">
        <h3>5</h3>
      </li>
      <li class="digit">
        <h3>6</h3>
      </li>
      <li class="digit">
        <h3>7</h3>
      </li>
      <li class="digit">
        <h3>8</h3>
      </li>
      <li class="digit">
        <h3>9</h3>
      </li>
      <li class="digit">
        <h3>0</h3>
      </li>
      <li class="action">
        <h3>clear</h3>
      </li>
      <li class="action">
        <h3>bkspc</h3>
      </li>
    </ul>
  </div>

</div>

Answer 2

您正在事件监听器中失去digits的范围。您需要像这样在事件监听器中将digits绑定为this的范围：

let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");

for (let i = 0; i < digits.length; i++) {
  digits[i].addEventListener("click", function() {
    add.innerHTML += this.innerHTML
  }).bind(digits[i]);
  digits[i].value = [i];
};

如何使将文本添加到div的可点击按钮

2 个答案: