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

Question

i want to create a function that adds text into an empty div depending on what button is clicked

i'm making a calculator as one of my beginner javascript projects (i know i can just use inputs and the "button" tag but i feel this'll be more original and challenging). i'm trying to add events to all the elements in the queryselector all nodelist, i feel my function is correct and i've tried all i can but the code doesn't seem to work, any help at all would be appreciated.

i am trying to create a kind of like input div that reflects the value or text of the clicked list item

 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

Typos

• it is id="camper" and not class="camper" if you want to use getElementById but you likely want insert instead of camper
• it is querySelectorAll(".digit") - you are missing the dot in the class selector

Logic

• use this.innerText to get the content of the digit

 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> 

Here is a more elegant way - if you are doing homework, you might want to do more coding before looking :)

 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

You are losing the scope of digits inside the event listener. You need to bind digits to be the scope of this in the event listener like so:

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];
};