如何使將文本添加到div的可點擊按鈕

Question

我想創建一個函數，根據單擊的按鈕將文本添加到一個空的div中

我正在做一個計算器，這是我的初學者javascript項目之一（我知道我可以只使用輸入和“ button”標簽，但我覺得這會變得更原始且更具挑戰性）。 我正在嘗試將事件添加到queryselector所有節點列表中的所有元素，我覺得我的功能是正確的，我已經盡力了，但是代碼似乎沒有用，任何幫助都將不勝感激。

我正在嘗試創建一種類似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];
};