I'm trying to get the text value inside a button. example:
if I click on papier I want the alert to say papier how can I call the HTML text of the button. right now I get undefined instead of "papier" when I click on papier.
<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>
It would better to use attribute selector and fire 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 in your clique function is already the element you clicked, you don't have to find it again, simply use x.innerHTML or better 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>you don't need a selector you are passing the button as a reference to your handler.
you can use value inside the button as well, value could be more versatile in my opinion.
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>