Как получить значения внутри div с помощью onclick на него?

Question

У меня есть 5 <div> с классом specific-letter в которых по одной букве.

Также у меня есть код, которий делает что-то когда я кликаю на <div> с классом specific-letter.

let click = () => {
 let letters = document.getElementsByClassName("specific-letter");
 let result = document.getElementById("names");
 let valueOnClick = document.getElementsByClassName("specific-letter").innerHTML;
 for (let i = 0; i < letters.length; i++) {
      letters[i].addEventListener("click", () => {

           console.log(valueOnClick); 

      }, false);
   }
 }
click();

Почему я в консоли получаю undefined? И как мне засунуть букву в переменную?

HTML:

<div class="specific-letter" onclick="click()">y</div>

Answer 1

Так попробуйте. И посмотрите на результат в консоли

let click = () => {
 let letters = document.getElementsByClassName("specific-letter");
 
 
 for (let i = 0; i < letters.length; i++) {
      letters[i].addEventListener("click", clickDiv, false);
   }
 }

function clickDiv(){

           console.log(this.innerHTML); 

      }
click();

Я бы сделал немного по другому.

 let letters = document.getElementsByClassName("specific-letter");
 
 let letterArray = letters.map(letter=>letter.innerHTML);
 console.log(letterArray);
 for (let i = 0; i < letters.length; i++) {
      letters[i].addEventListener("click", click, true);
   }
 

function click(e){
  e.stopPropagation();
  console.log(this.innerHTML); 
}

БЛОГ НА HUSL

Как получить значения внутри div с помощью onclick на него?

Ответы (1 шт):