How can i make my second button have an onclick function
-2
I created a button where when clicked on creates another button but Iam not sure how to make an onclick event for that button
function boyFunction(){
var btn1 = document.createElement("BUTTON");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I want to be able to click the basketball button and have that button show an image
html button dom-events
edited Jan 18 at 20:24
user1579234
288213
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
add a comment |
-2
I created a button where when clicked on creates another button but Iam not sure how to make an onclick event for that button
function boyFunction(){
var btn1 = document.createElement("BUTTON");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I want to be able to click the basketball button and have that button show an image
html button dom-events
edited Jan 18 at 20:24
user1579234
288213
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
stackoverflow.com/questions/11017509/…
– imvain2
Jan 18 at 20:25
add a comment |
-2
-2
-2
I created a button where when clicked on creates another button but Iam not sure how to make an onclick event for that button
function boyFunction(){
var btn1 = document.createElement("BUTTON");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I want to be able to click the basketball button and have that button show an image
html button dom-events
edited Jan 18 at 20:24
user1579234
288213
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
I created a button where when clicked on creates another button but Iam not sure how to make an onclick event for that button
function boyFunction(){
var btn1 = document.createElement("BUTTON");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I want to be able to click the basketball button and have that button show an image
html button dom-events
html button dom-events
edited Jan 18 at 20:24
user1579234
288213
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
edited Jan 18 at 20:24
user1579234
288213
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
edited Jan 18 at 20:24
user1579234
288213
edited Jan 18 at 20:24
user1579234
288213
edited Jan 18 at 20:24
user1579234
288213
288213
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
asked Jan 18 at 20:20
Rimsky RichardRimsky Richard
32
32
stackoverflow.com/questions/11017509/…
– imvain2
Jan 18 at 20:25
add a comment |
stackoverflow.com/questions/11017509/…
– imvain2
Jan 18 at 20:25
stackoverflow.com/questions/11017509/…
– imvain2
Jan 18 at 20:25
stackoverflow.com/questions/11017509/…
– imvain2
Jan 18 at 20:25
add a comment |
4 Answers
4
active
oldest
votes
0
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
answered Jan 18 at 20:31
user1579234user1579234
288213
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
add a comment |
0
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
answered Jan 18 at 20:26
MaZoliMaZoli
1319
add a comment |
0
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
add a comment |
0
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:34
VadiVadi
17017
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%2f54260902%2fhow-can-i-make-my-second-button-have-an-onclick-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
answered Jan 18 at 20:31
user1579234user1579234
288213
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
add a comment |
0
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
answered Jan 18 at 20:31
user1579234user1579234
288213
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
add a comment |
0
0
0
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
answered Jan 18 at 20:31
user1579234user1579234
288213
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
answered Jan 18 at 20:31
user1579234user1579234
288213
answered Jan 18 at 20:31
user1579234user1579234
288213
answered Jan 18 at 20:31
user1579234user1579234
288213
answered Jan 18 at 20:31
user1579234user1579234
288213
288213
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
add a comment |
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
Thank you deeply sir
– Rimsky Richard
Jan 18 at 21:43
add a comment |
0
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
answered Jan 18 at 20:26
MaZoliMaZoli
1319
add a comment |
0
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
answered Jan 18 at 20:26
MaZoliMaZoli
1319
add a comment |
0
0
0
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
answered Jan 18 at 20:26
MaZoliMaZoli
1319
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
answered Jan 18 at 20:26
MaZoliMaZoli
1319
answered Jan 18 at 20:26
MaZoliMaZoli
1319
answered Jan 18 at 20:26
MaZoliMaZoli
1319
answered Jan 18 at 20:26
MaZoliMaZoli
1319
1319
add a comment |
add a comment |
0
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
add a comment |
0
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
add a comment |
0
0
0
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
answered Jan 18 at 20:37
Vu Huu CuongVu Huu Cuong
1,077510
1,077510
add a comment |
add a comment |
0
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:34
VadiVadi
17017
add a comment |
0
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:34
VadiVadi
17017
add a comment |
0
0
0
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:34
VadiVadi
17017
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
answered Jan 18 at 20:34
VadiVadi
17017
edited Jan 18 at 20:39
answered Jan 18 at 20:34
VadiVadi
17017
answered Jan 18 at 20:34
VadiVadi
17017
answered Jan 18 at 20:34
VadiVadi
17017
17017
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.
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%2f54260902%2fhow-can-i-make-my-second-button-have-an-onclick-function%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
stackoverflow.com/questions/11017509/…
– imvain2
Jan 18 at 20:25