0

inserir a descrição da imagem aqui

</div id ="num-vol">
  <div>
    <button type="button" class="quina" value="1">01</button>
    <button type="button" class="quina" value="2">02</button>
    <button type="button" class="quina" value="3">03</button>
    <button type="button" class="quina" value="4">04</button>
    <button type="button" class="quina" value="5">05</button>
    <button type="button" class="quina" value="6">06</button>
    <button type="button" class="quina" value="7">07</button>
    <button type="button" class="quina" value="8">08</button>
</div>

quero clicar no botão e o valor aparecer em um textarea sem ter que usar um addEventListener() para cada botão

5 Respostas 5

0

Acredito que a melhor solução é criar o callback de forma independente e indicar que ele será o callback dos botões.

Por exemplo:

var adicionarValor = function(evt) {
    // Dentro do objeto evt esta o target, e o target tem um value:
    var txt = document.querySelector("#txt");
    txt.innerHTML += evt.target.value + " \n";
};


// Sera executado apos o carregamento da pagina
window.onload = function() {
    // vamos pegar todos os botoes:
    var botoes = document.querySelectorAll(".quina");
    for(var i=0;i<botoes.length;i++) {
      var botao = botoes[i];
      
      // O jeito correto e padronizado de incluir eventos no ECMAScript
      // (Javascript) eh com addEventListener:
      botao.addEventListener("click", adicionarValor);
    }
 };
button {
  display: inline;
  font-size: 1.2em;
}

#txt {
  width: 90%;
  height: 200px;
}
<html>

<body>
  <h1>Exemplo</h1>
  <button type="button" class="quina" value="1">01</button>
  <button type="button" class="quina" value="2">02</button>
  <button type="button" class="quina" value="3">03</button>
  <button type="button" class="quina" value="4">04</button>
  <button type="button" class="quina" value="5">05</button>
  <button type="button" class="quina" value="6">06</button>
  <button type="button" class="quina" value="7">07</button>
  <button type="button" class="quina" value="8">08</button>
  <button type="button" class="quina" value="9">09</button>
  <button type="button" class="quina" value="10">10</button><br>
  <textarea id="txt"></textarea>
</body>

</html>

0

Com um for, depois de selecionar os elementos pela classe, você pode atribuir um eventListener para todos de uma só vez.

var botoes = document.body.querySelectorAll(".quina");

for(var x=0; x<botoes.length; x++){
   botoes[x].addEventListener("click", function(){
       document.body.querySelector("#calc").value = this.value;
   });
}
<textarea id="calc"></textarea>
<br>
<button type="button" class="quina" value="1">01</button>
<button type="button" class="quina" value="2">02</button>
<button type="button" class="quina" value="3">03</button>
<button type="button" class="quina" value="4">04</button>
<button type="button" class="quina" value="5">05</button>
<button type="button" class="quina" value="6">06</button>
<button type="button" class="quina" value="7">07</button>
<button type="button" class="quina" value="8">08</button>

0

Também podes utilizar onclick

var botoes = document.querySelectorAll('.quina');
for (let i = 0; i < botoes.length; i++) {
  botoes[i].onclick = function(e) {
      document.querySelector('#resultado').value += 'Botão número: ' + e.target.value + '\n';
    };
}
<textarea id="resultado"></textarea>
<hr />
<button type="button" class="quina" value="1">01</button>
<button type="button" class="quina" value="2">02</button>
<button type="button" class="quina" value="3">03</button>
<button type="button" class="quina" value="4">04</button>
<button type="button" class="quina" value="5">05</button>
<button type="button" class="quina" value="6">06</button>
<button type="button" class="quina" value="7">07</button>
<button type="button" class="quina" value="8">08</button>

0

Uma forma de sefazer sem precisar fazer um loop adicionando o evento em todos os botões:

var textarea = document.getElementById('resultado');

document.getElementById('buttons').addEventListener('click', function(element) {
  textarea.innerText = element.path[0].value || '';
})
<textarea id="resultado"></textarea>

<div id="buttons">
<button type="button" class="quina" value="1">01</button>
<button type="button" class="quina" value="2">02</button>
<button type="button" class="quina" value="3">03</button>
<button type="button" class="quina" value="4">04</button>
<button type="button" class="quina" value="5">05</button>
<button type="button" class="quina" value="6">06</button>
<button type="button" class="quina" value="7">07</button>
<button type="button" class="quina" value="8">08</button>
</div>

0

O que você pode fazer é aplicar o addEventListener no parente, por exemplo:

document.querySelector(".botoes").addEventListener("click", function(e) {
  if (e.target.value !== undefined && e.target.classList.contains('quina')) {
    alert(e.target.value)
  }
});
<div class="botoes">
  <button type="button" class="quina" value="1">01</button>
  <button type="button" class="quina" value="2">02</button>
  <button type="button" class="quina" value="3">03</button>
  <button type="button" class="quina" value="4">04</button>
  <button type="button" class="quina" value="5">05</button>
  <button type="button" class="quina" value="6">06</button>
  <button type="button" class="quina" value="7">07</button>
  <button type="button" class="quina" value="8">08</button>
</div>

Neste caso existe apenas um único addEventListener, o valor de cada botão é justamente obtido através do target presente no callback. Porém, neste caso todo o clique feito dentro da div.botoes irá emitir um callback, por isso é usado o e.target.classList.contains('quina') para assegurar que o alvo possui a classe quina e também que ele possui um valor, e.target.value !== undefined.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .