I can't bind events to elements
2
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}It seems that the listener is not getting bound despite the addEventListener. What is the problem?
javascript
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
asked Nov 23 '18 at 5:52
ChangHun Lee
183
|
show 2 more comments
2
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}It seems that the listener is not getting bound despite the addEventListener. What is the problem?
javascript
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
asked Nov 23 '18 at 5:52
ChangHun Lee
183
It seems you're missing ";" in the line of adding the event listener. Try adding a semi-colon there (in the line above: "document.body,appendChild(a[i]);"). Also, be sure to add the HTML so we can be more helpful.. it might have something do to with that. Try doing this trough JSfiddle and simply share the link, that's another easier method. Also, it is common to be more specific about your problem when asking questions here..
– Reckless Engineer
Nov 23 '18 at 5:57
I don't think you can add an event listener to a button before it has been appended to the body, you need to add event listeners after the elements have been added to the DOM.
– Lloyd
Nov 23 '18 at 5:58
Please remember we're on a Question & Answer site. Questions should have enough detail that the volunteers here can help you, and questions should be useful to the next developer with a similar issue.
– stealththeninja
Nov 23 '18 at 5:59
2
@stealththeninja There are enough details in the question, though. There's a fully working code to reproduce the problem, and a minimalistic, but full explanation of the problem ...
– Teemu
Nov 23 '18 at 6:03
2
@Lloyd You can indeed add a listener to an element before appending the element to the DOM.
– CertainPerformance
Nov 23 '18 at 6:05
|
show 2 more comments
2
2
2
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}It seems that the listener is not getting bound despite the addEventListener. What is the problem?
javascript
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
asked Nov 23 '18 at 5:52
ChangHun Lee
183
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}It seems that the listener is not getting bound despite the addEventListener. What is the problem?
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}javascript
javascript
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
asked Nov 23 '18 at 5:52
ChangHun Lee
183
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
asked Nov 23 '18 at 5:52
ChangHun Lee
183
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
edited Nov 23 '18 at 6:14
Teemu
18.3k63471
18.3k63471
asked Nov 23 '18 at 5:52
ChangHun Lee
183
asked Nov 23 '18 at 5:52
ChangHun Lee
183
asked Nov 23 '18 at 5:52
ChangHun Lee
183
183
It seems you're missing ";" in the line of adding the event listener. Try adding a semi-colon there (in the line above: "document.body,appendChild(a[i]);"). Also, be sure to add the HTML so we can be more helpful.. it might have something do to with that. Try doing this trough JSfiddle and simply share the link, that's another easier method. Also, it is common to be more specific about your problem when asking questions here..
– Reckless Engineer
Nov 23 '18 at 5:57
I don't think you can add an event listener to a button before it has been appended to the body, you need to add event listeners after the elements have been added to the DOM.
– Lloyd
Nov 23 '18 at 5:58
Please remember we're on a Question & Answer site. Questions should have enough detail that the volunteers here can help you, and questions should be useful to the next developer with a similar issue.
– stealththeninja
Nov 23 '18 at 5:59
2
@stealththeninja There are enough details in the question, though. There's a fully working code to reproduce the problem, and a minimalistic, but full explanation of the problem ...
– Teemu
Nov 23 '18 at 6:03
2
@Lloyd You can indeed add a listener to an element before appending the element to the DOM.
– CertainPerformance
Nov 23 '18 at 6:05
|
show 2 more comments
It seems you're missing ";" in the line of adding the event listener. Try adding a semi-colon there (in the line above: "document.body,appendChild(a[i]);"). Also, be sure to add the HTML so we can be more helpful.. it might have something do to with that. Try doing this trough JSfiddle and simply share the link, that's another easier method. Also, it is common to be more specific about your problem when asking questions here..
– Reckless Engineer
Nov 23 '18 at 5:57
I don't think you can add an event listener to a button before it has been appended to the body, you need to add event listeners after the elements have been added to the DOM.
– Lloyd
Nov 23 '18 at 5:58
Please remember we're on a Question & Answer site. Questions should have enough detail that the volunteers here can help you, and questions should be useful to the next developer with a similar issue.
– stealththeninja
Nov 23 '18 at 5:59
2
@stealththeninja There are enough details in the question, though. There's a fully working code to reproduce the problem, and a minimalistic, but full explanation of the problem ...
– Teemu
Nov 23 '18 at 6:03
2
@Lloyd You can indeed add a listener to an element before appending the element to the DOM.
– CertainPerformance
Nov 23 '18 at 6:05
It seems you're missing ";" in the line of adding the event listener. Try adding a semi-colon there (in the line above: "document.body,appendChild(a[i]);"). Also, be sure to add the HTML so we can be more helpful.. it might have something do to with that. Try doing this trough JSfiddle and simply share the link, that's another easier method. Also, it is common to be more specific about your problem when asking questions here..
– Reckless Engineer
Nov 23 '18 at 5:57
It seems you're missing ";" in the line of adding the event listener. Try adding a semi-colon there (in the line above: "document.body,appendChild(a[i]);"). Also, be sure to add the HTML so we can be more helpful.. it might have something do to with that. Try doing this trough JSfiddle and simply share the link, that's another easier method. Also, it is common to be more specific about your problem when asking questions here..
– Reckless Engineer
Nov 23 '18 at 5:57
I don't think you can add an event listener to a button before it has been appended to the body, you need to add event listeners after the elements have been added to the DOM.
– Lloyd
Nov 23 '18 at 5:58
I don't think you can add an event listener to a button before it has been appended to the body, you need to add event listeners after the elements have been added to the DOM.
– Lloyd
Nov 23 '18 at 5:58
Please remember we're on a Question & Answer site. Questions should have enough detail that the volunteers here can help you, and questions should be useful to the next developer with a similar issue.
– stealththeninja
Nov 23 '18 at 5:59
Please remember we're on a Question & Answer site. Questions should have enough detail that the volunteers here can help you, and questions should be useful to the next developer with a similar issue.
– stealththeninja
Nov 23 '18 at 5:59
2
2
@stealththeninja There are enough details in the question, though. There's a fully working code to reproduce the problem, and a minimalistic, but full explanation of the problem ...
– Teemu
Nov 23 '18 at 6:03
@stealththeninja There are enough details in the question, though. There's a fully working code to reproduce the problem, and a minimalistic, but full explanation of the problem ...
– Teemu
Nov 23 '18 at 6:03
2
2
@Lloyd You can indeed add a listener to an element before appending the element to the DOM.
– CertainPerformance
Nov 23 '18 at 6:05
@Lloyd You can indeed add a listener to an element before appending the element to the DOM.
– CertainPerformance
Nov 23 '18 at 6:05
|
show 2 more comments
2 Answers
2
active
oldest
votes
5
The problem is that, when concatenating with the innerHTML of a container (for example, with your document.body.innerHTML += "<br>"), the container will be emptied and then re-parsed with the new HTML string. If you previously attached a listener to an element in the container, that listener will not be in the HTML string, so it will not transfer over to the new element in the same position.
const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>Either append your br using the same appendChild method you're using for the a[i]:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}Or use insertAdjacentHTML instead, which can act similarly to .innerHTML +=, but unlike .innerHTML +=, does not re-create all elements in the container:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
add a comment |
0
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}
for (let i = 0; i < color.length; i++) {
var el = document.getElementById("b" + (i + 1)) ;
console.log(el)
el.addEventListener('click', function() {
alert('color');
})
}
https://jsfiddle.net/3zw0a1tx/
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441265%2fi-cant-bind-events-to-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
5
The problem is that, when concatenating with the innerHTML of a container (for example, with your document.body.innerHTML += "<br>"), the container will be emptied and then re-parsed with the new HTML string. If you previously attached a listener to an element in the container, that listener will not be in the HTML string, so it will not transfer over to the new element in the same position.
const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>Either append your br using the same appendChild method you're using for the a[i]:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}Or use insertAdjacentHTML instead, which can act similarly to .innerHTML +=, but unlike .innerHTML +=, does not re-create all elements in the container:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
add a comment |
5
The problem is that, when concatenating with the innerHTML of a container (for example, with your document.body.innerHTML += "<br>"), the container will be emptied and then re-parsed with the new HTML string. If you previously attached a listener to an element in the container, that listener will not be in the HTML string, so it will not transfer over to the new element in the same position.
const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>Either append your br using the same appendChild method you're using for the a[i]:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}Or use insertAdjacentHTML instead, which can act similarly to .innerHTML +=, but unlike .innerHTML +=, does not re-create all elements in the container:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
add a comment |
5
5
5
The problem is that, when concatenating with the innerHTML of a container (for example, with your document.body.innerHTML += "<br>"), the container will be emptied and then re-parsed with the new HTML string. If you previously attached a listener to an element in the container, that listener will not be in the HTML string, so it will not transfer over to the new element in the same position.
const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>Either append your br using the same appendChild method you're using for the a[i]:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}Or use insertAdjacentHTML instead, which can act similarly to .innerHTML +=, but unlike .innerHTML +=, does not re-create all elements in the container:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
The problem is that, when concatenating with the innerHTML of a container (for example, with your document.body.innerHTML += "<br>"), the container will be emptied and then re-parsed with the new HTML string. If you previously attached a listener to an element in the container, that listener will not be in the HTML string, so it will not transfer over to the new element in the same position.
const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>Either append your br using the same appendChild method you're using for the a[i]:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}Or use insertAdjacentHTML instead, which can act similarly to .innerHTML +=, but unlike .innerHTML +=, does not re-create all elements in the container:
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>const div1 = document.querySelector('#somediv');
document.body.innerHTML += '';
const div2 = document.querySelector('#somediv');
console.log(div1 === div2);
// False, the container's contents were re-parsed, the new div is different!<div id="somediv"></div>const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.appendChild(document.createElement('br'));
}const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
a[i].addEventListener('click', function() {
alert('color');
})
document.body.appendChild(a[i]);
document.body.insertAdjacentHTML('beforeend', '<br>');
}answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
answered Nov 23 '18 at 5:59
CertainPerformance
77.4k143862
77.4k143862
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
add a comment |
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh Thanks!! I can get new information about your advice. I've never heard about that
– ChangHun Lee
Nov 24 '18 at 4:46
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
Oh my mistake. I've accept your answer:)
– ChangHun Lee
Nov 24 '18 at 5:02
add a comment |
0
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}
for (let i = 0; i < color.length; i++) {
var el = document.getElementById("b" + (i + 1)) ;
console.log(el)
el.addEventListener('click', function() {
alert('color');
})
}
https://jsfiddle.net/3zw0a1tx/
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
add a comment |
0
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}
for (let i = 0; i < color.length; i++) {
var el = document.getElementById("b" + (i + 1)) ;
console.log(el)
el.addEventListener('click', function() {
alert('color');
})
}
https://jsfiddle.net/3zw0a1tx/
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
add a comment |
0
0
0
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}
for (let i = 0; i < color.length; i++) {
var el = document.getElementById("b" + (i + 1)) ;
console.log(el)
el.addEventListener('click', function() {
alert('color');
})
}
https://jsfiddle.net/3zw0a1tx/
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
const color = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
let a = ;
for (let i = 0; i < color.length; i++) {
a[i] = document.createElement("input");
a[i].type = 'button';
a[i].id = 'b' + (i + 1);
a[i].value = color[i];
document.body.appendChild(a[i]);
document.body.innerHTML += "<br>"
console.log(a[0].innerHTML);
}
for (let i = 0; i < color.length; i++) {
var el = document.getElementById("b" + (i + 1)) ;
console.log(el)
el.addEventListener('click', function() {
alert('color');
})
}
https://jsfiddle.net/3zw0a1tx/
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
answered Nov 23 '18 at 6:26
Abhishek Mani
31726
31726
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441265%2fi-cant-bind-events-to-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It seems you're missing ";" in the line of adding the event listener. Try adding a semi-colon there (in the line above: "document.body,appendChild(a[i]);"). Also, be sure to add the HTML so we can be more helpful.. it might have something do to with that. Try doing this trough JSfiddle and simply share the link, that's another easier method. Also, it is common to be more specific about your problem when asking questions here..
– Reckless Engineer
Nov 23 '18 at 5:57
I don't think you can add an event listener to a button before it has been appended to the body, you need to add event listeners after the elements have been added to the DOM.
– Lloyd
Nov 23 '18 at 5:58
Please remember we're on a Question & Answer site. Questions should have enough detail that the volunteers here can help you, and questions should be useful to the next developer with a similar issue.
– stealththeninja
Nov 23 '18 at 5:59
2
@stealththeninja There are enough details in the question, though. There's a fully working code to reproduce the problem, and a minimalistic, but full explanation of the problem ...
– Teemu
Nov 23 '18 at 6:03
2
@Lloyd You can indeed add a listener to an element before appending the element to the DOM.
– CertainPerformance
Nov 23 '18 at 6:05