Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Acessar classe ou innerHTML de elemento button criado dinamicamente.

por Tatiane Castelo Padovani
| 18.3k xp | 3 posts

Boa noite pessoal! Criei dinamicamente um teclado alfabético com botões, mas não consigo pegar o innerHTML (que contém a letra clicada) pois o JS não reconhece a classe que eu inseri dinamicamente junto com os botões.

const alfabeto = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','ç','z','x','c','v','b','n','m'];

function criarTeclado(){ 
const teclado = document.querySelector('#box02');

for(let x=0; x<alfabeto.length; x++){ 

const criarTecla = document.createElement('button');
//criarTecla.setAttribute('id', 'teclaAlfabeto');
criarTecla.classList.add('teclaAlfabeto')
criarTecla.innerHTML = alfabeto[x];

teclado.appendChild(criarTecla);
}

Quando tento colocar os elementos com a classe "teclaAlfabeto" usando o querySelector numa variável, para que eu possa acessar o innerHTML, ele não reconhece que existem elementos com essa classe.

var letraIndividual = document.querySelector('.teclaAlfabeto');
console.log(letraIndividual);

Alguem pode me ajudar a ter uma ideia de como pegar as letras (innerHTML) em cada botão criado dinamicamente? Obrigada!

1 resposta
por Luis Dias
| 2414.2k xp | 1840 posts
Developer (⌐■_■) 
<html>

<body>
  <div id="box">
  </div>
  <h1 id="saidaTexto"></h1>
  <script>
    const alfabeto = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ç', 'z', 'x', 'c', 'v', 'b', 'n', 'm'];

    function criarTeclado() {
      const teclado = document.querySelector('#box');

      for (let x = 0; x < alfabeto.length; x++) {
        let identidade = 'letra_' + alfabeto[x];
        const criarTecla = document.createElement('button');
        criarTecla.setAttribute('id', identidade);
        criarTecla.onclick = () => showLetra(event.target);
        criarTecla.innerHTML = alfabeto[x];
        teclado.appendChild(criarTecla);
      }
    }

    criarTeclado();

    function showLetra(letra) {
      saidaTexto.innerText += letra.innerText;
      console.log(letra.innerText.toUpperCase());
    }
  </script>
</body>

</html>