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 type="text" onclick="clique(this)">Roche</button></td>
<td><button type="text" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button type="text" onclick="clique(this)">Papier</button></td>
<td><button type="text" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button type="text" onclick="clique(this)">Ciseau</button></td>
<td><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>
CodePudding user response：
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 type="text" data-name="button">Roche</button></td>
<td><button type="text" data-name="button">Roche</button></td>
</tr>
<tr>
<td><button type="text" data-name="button">Papier</button></td>
<td><button type="text" data-name="button">Papier</button></td>
</tr>
<tr>
<td><button type="text" data-name="button">Ciseau</button></td>
<td><button data-name="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>CodePudding user response：
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 type="text" onclick="clique(this)">Roche</button></td>
<td><button type="text" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button type="text" onclick="clique(this)">Papier</button></td>
<td><button type="text" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button type="text" onclick="clique(this)">Ciseau</button></td>
<td><button type="text" onclick="clique(this)">Ciseau</button></td>
</tr>
</table>
</div>
</div>CodePudding user response：
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 type="text" value="Roche" onclick="clique(this)">Roche</button></td>
<td><button type="text" value="Roche" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button type="text" value="Papier" onclick="clique(this)">Papier</button></td>
<td><button type="text" value="Papier" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button type="text" value="Ciseau" onclick="clique(this)">Ciseau</button></td>
<td><button type="text" value="Ciseau" onclick="clique(this)">Ciseau</button></td>
</tr>
</table>
</div>
</div>CodePudding user response：
Because querySelector will only pick up the first matching element.
Now you could use querySelectorAll but in JavaScript there's a process called event delegation. It allows you to add one listener to a parent element that captures the events from its child elements as they "bubble up" the DOM. It makes your code and markup cleaner, and has one single point of failure rather than many.
// Cache the container
const interface = document.querySelector('#interface');
// Add a listener to it
interface.addEventListener('click', handleClick);
// Check the clicked element is a button, and
// log its text content
function handleClick(e) {
if (e.target.matches('button')) {
console.log(e.target.textContent);
}
}<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button>Roche</button></td>
<td><button>Roche</button></td>
</tr>
<tr>
<td><button>Papier</button></td>
<td><button>Papier</button></td>
</tr>
<tr>
<td><button>Ciseau</button></td>
<td><button>Ciseau</button></td>
</tr>
</table>
</div>
</div>Additional documentation
CodePudding user response：
Just need to say
alert(x.innerHTML)
CodePudding user response：
Updated clique function as:
function clique(x) {
alert(x.innerText);
}
The complete code will become:
<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button type="text" onclick="clique(this)">Roche</button></td>
<td><button type="text" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button type="text" onclick="clique(this)">Papier</button></td>
<td><button type="text" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button type="text" onclick="clique(this)">Ciseau</button></td>
<td><button type="text" onclick="clique(this)">Ciseau</button></td>
</tr>
</table>
</div>
</div>
<script>
function clique(x) {
//var element = document.querySelector("button").innerHTML; // no need
alert(x.innerText);
}
</script>CodePudding user response：
You can change your function like this
function clique(x) {
alert(x.innerHTML);
}