Reputation: 15409
Here's my code. It correctly adds buttons using JavaScript, but the event listener doesn't work as expected. The output in the text area is always button100
, no matter which button I click. Well, the button click doesn't change anything for any of the buttons, which makes me think the listener is not getting added correctly.
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler(button);
document.getElementById("theBody").appendChild(button);
}
function clickHandler(button) {
console.log('clicked');
var value = button.value;
debugConsole.value = value;
}
</script>
<body>
</html>
I'm not sure where the mistake is. Shouldn't the for loop add the clickHandler() to all buttons?
Upvotes: 1
Views: 1061
Reputation: 721
onclick is a function so you should pass the value button.onclick = function
instead of button.onclick = function(node)
.
Here is the correct way to do it
HTML
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler;
document.getElementById("theBody").appendChild(button);
}
function clickHandler(event) {
document.getElementById('debugConsole').value = event.target.value;
}
</script>
<body>
</html>
Demo:
Upvotes: 0
Reputation: 56724
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler;
document.getElementById("theBody").appendChild(button);
}
function clickHandler() {
console.log(this.value);
document.getElementById('debugConsole').value = this.value;
}
</script>
<body>
</html>
Upvotes: 0
Reputation: 1063
You are executing the clickHandler when you add (); you need to just specify the callback by name:
button.onclick = clickHandler;
You can all always find the element that fired the event by passing (e), so your clickHandler should do this:
function clickHandler(e) {
var originElement = e.target;
}
Upvotes: 1
Reputation: 1420
Your code:
button.onclick = clickHandler(button);
Is not assigning the function clickHandler to the event, it is assigning the result of the return value of invoking clickHandler. The result is undefined or null since there is no explicit return for the function.
This is what you need.
<html>
<head><title>Many buttons</title></head>
<body id="theBody">
<br><br>
<textarea id="debugConsole" rows="4" cols="50"></textarea>
<script type="text/javascript">
for (var i = 1; i <= 100; i ++) {
var button = document.createElement('input');
button.type = "button";
button.value = "button" + i;
button.onclick = clickHandler;
document.getElementById("theBody").appendChild(button);
}
function clickHandler(event) {
console.log('clicked');
var value = event.target.value;
debugConsole.value = value;
}
</script>
<body>
</html>
I would have to double check event.target.value, but that is the gist of what you need.
Upvotes: 3