Estoy tratando de obtener el valor del texto dentro de un botón. ejemplo:
si hago clic en papel, quiero que la alerta diga papel, ¿cómo puedo llamar al texto HTML del botón? ahora mismo obtengo indefinido en lugar de "papel" cuando hago clic en papel.
<h1>Jeu de Roche,Papier,Ciseau</h1> <div id="conteneur"> <div id="interface"> <table> <tr> <td><button class="button" type="text" onclick="clique(this)">Roche</button></td> <td><button class="button" type="text" onclick="clique(this)">Roche</button></td> </tr> <tr> <td><button class="button" type="text" onclick="clique(this)">Papier</button></td> <td><button class="button" type="text" onclick="clique(this)">Papier</button></td> </tr> <tr> <td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td> <td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td> </tr> </table> </div> </div> <script> function clique(x) { var element = document.querySelector("button").innerHTML; alert(x.element); } </script>Sería mejor usar el selector de atributos y activar addEventlistener.
<h1>Jeu de Roche,Papier,Ciseau</h1> <div id="conteneur"> <div id="interface"> <table> <tr> <td><button class="button" type="text" data-name="button">Roche</button></td> <td><button class="button" type="text" data-name="button">Roche</button></td> </tr> <tr> <td><button class="button" type="text" data-name="button">Papier</button></td> <td><button class="button" type="text" data-name="button">Papier</button></td> </tr> <tr> <td><button class="button" type="text" data-name="button">Ciseau</button></td> <td><button data-name="button" class="button" type="text" >Ciseau</button></td> </tr> </table> </div> </div> <script> const buttons = document.querySelectorAll("[data-name='button']") buttons.forEach(button => button.addEventListener('click', function() { console.log(this.innerHTML) })) </script>x en su función clique ya es el elemento en el que hizo clic, no tiene que volver a encontrarlo, simplemente use x.innerHTML o mejor x.innerText :
function clique(x) { alert(x.innerText); } <h1>Jeu de Roche,Papier,Ciseau</h1> <div id="conteneur"> <div id="interface"> <table> <tr> <td><button class="button" type="text" onclick="clique(this)">Roche</button></td> <td><button class="button" type="text" onclick="clique(this)">Roche</button></td> </tr> <tr> <td><button class="button" type="text" onclick="clique(this)">Papier</button></td> <td><button class="button" type="text" onclick="clique(this)">Papier</button></td> </tr> <tr> <td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td> <td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td> </tr> </table> </div> </div>no necesita un selector, está pasando el botón como referencia a su controlador.
también puede usar el valor dentro del botón, el valor podría ser más versátil en mi opinión.
function clique(btn) { alert(btn.value); alert(btn.innerHTML); alert(btn.innerText) } <h1>Jeu de Roche,Papier,Ciseau</h1> <div id="conteneur"> <div id="interface"> <table> <tr> <td><button class="button" type="text" value="Roche" onclick="clique(this)">Roche</button></td> <td><button class="button" type="text" value="Roche" onclick="clique(this)">Roche</button></td> </tr> <tr> <td><button class="button" type="text" value="Papier" onclick="clique(this)">Papier</button></td> <td><button class="button" type="text" value="Papier" onclick="clique(this)">Papier</button></td> </tr> <tr> <td><button class="button" type="text" value="Ciseau" onclick="clique(this)">Ciseau</button></td> <td><button class="button" type="text" value="Ciseau" onclick="clique(this)">Ciseau</button></td> </tr> </table> </div> </div>