javascript - Adding an onclick event to a button with a button that has an onclick event? - Stack Overflow

2024.10.04 11:29

Skip to main content Stack Overflow About Products OverflowAI Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand OverflowAI GenAI features for Teams OverflowAPI Train & fine-tune LLMs Labs The future of collective knowledge sharing About the company Visit the blog

current community

Stack Overflow help chat Meta Stack Overflow

your communities

more stack exchange communities

company blog Log in Sign up Home Questions Tags Users Companies Labs Jobs Discussions Collectives

Communities for your favorite technologies. Explore all Collectives

Teams

Now available on Stack Overflow for Teams! AI features where you work: search, IDE, and chat.

Learn more Explore Teams Teams

Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs

Adding an onclick event to a button with a button that has an onclick event?

Ask Question Asked 7 years, 2 months ago Modified 4 years, 6 months ago Viewed 4k times 1

I have 2 buttons, one has an onclick event that when clicked calls a function that is supposed to add an onclick event handler to the second button.

I was able to do this little example in w3schools.com, here is the code:

!DOCTYPE html html body p Click "Try it" to execute the displayDate() function. /p button id="myBtn2" onclick="addfunc();" Trigger /button button id="myBtn" Try it /button p id="demo" /p script function addfunc(){ document.getElementById("myBtn").onclick = displayDate(); } function displayDate() { document.getElementById("demo").innerHTML = Date(); } /script /body /html

The intended function is that when clicking "Try it" button before "Trigger", nothing happens, and only after clicking "Trigger" the "Try it" button should work. Problem is when I click "Trigger" it actually runs the function that it is supposed to be executed by the click of "Try it" button.

Hope I explained myself, thanks!

javascript html onclick Share Improve this question Follow asked Aug 2, 2017 at 2:17 Juan Solana Juan Solana 147 3 3 silver badges 11 11 bronze badges Add a comment |

2 Answers 2

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1

You should use displayDate instead of displayDate() . Because displayDate() directly calls the function.

!DOCTYPE html html body p Click "Try it" to execute the displayDate() function. /p button id="myBtn2" onclick="addfunc();" Trigger /button button id="myBtn" Try it /button p id="demo" /p script function addfunc(){ document.getElementById("myBtn").onclick = displayDate; } function displayDate() { document.getElementById("demo").innerHTML = Date(); } /script /body /html

If you want to pass variables

!DOCTYPE html html body p Click "Try it" to execute the displayDate() function. /p button id="myBtn2" onclick="addfunc();" Trigger /button button id="myBtn" Try it /button p id="demo" /p script function addfunc(){ document.getElementById("myBtn").addEventListener('click', function(){ displayDate("my params"); }); } function displayDate(params) { document.getElementById("demo").innerHTML = Date() + " -- " + params; } /script /body /html

Share Improve this answer Follow edited Aug 2, 2017 at 2:28 answered Aug 2, 2017 at 2:19 Suresh Atta Suresh Atta 122k 38 38 gold badges 203 203 silver badges 313 313 bronze badges 3 Wow, that was fast! Thanks! What if I want to pass a parameter with the function, say addfunc(x,y), so that they can be used by displayDate? – Juan Solana Commented Aug 2, 2017 at 2:24 @JuanSolana Updated my answer. – Suresh Atta Commented Aug 2, 2017 at 2:28 @SURESHATTA Thanks! That worked! I stayed with .onclick and used the right part of your .addEventListener suggestion! – Juan Solana Commented Aug 2, 2017 at 2:34 Add a comment | 0

You can disable the second button (in HTML code) and make a first button an activator of btn1

body main input class="btn1" type="button" value="enable button 2" name="btn1" onclick="ableBtn2()" button Id="btn2" onclick="displayDate()" disabled="true" button 2 /button p id="test" /p script type="text/javascript" function ableBtn2() { document.getElementById("btn2").disabled = false; } /script script type="text/javascript" function displayDate() { document.getElementById("test").innerHTML = Date(); } /script /main /body

Share Improve this answer Follow edited Apr 5, 2020 at 1:31 j3ff 5,989 8 8 gold badges 42 42 silver badges 54 54 bronze badges answered Apr 4, 2020 at 23:32 ecsIsAFK ecsIsAFK 1 1 1 bronze badge Add a comment |

Not the answer you're looking for? Browse other questions tagged javascript html onclick or ask your own question .

The Overflow Blog A developer works to balance the data center boom with his climate change battle Community Products Roadmap Update, October 2024 Featured on Meta Preventing unauthorized automated access to the network Upcoming initiatives on Stack Overflow and across the Stack Exchange network Feedback Requested: How do you use the tagged questions page? Proposed designs to update the homepage for logged-in users

15 Add event to button with javascript 2 How to add on to an existing onclick event? 0 using javascript to add an OnClick event 26 HTML button onclick event 1 How to add an onclick button event? 0 Adding onclick event using only javascript 1 How to add an eventlistener to a button javascript 2 How to add on-click event to button in javascript? 1 Two onclick Events with One Button 1 How do you put an onclick on a js button

Hot Network Questions

Prove that no matter how the points are colored that there is an isosceles triangle inscribed in the circle whose vertices are all the same color How were the 70s versions of pong and similar games implemented without a programmable computer? Covariance from a Joint Probability Function Can I travel to another country when my nationality hasn't been established yet? Hello, i want to replicate the Möller's diagram in Latex, Does Know to replicate it? Thanks Are tyres truly the best upgrade for a bike? What source does PMag.Osl. refer to? Does setting the parking brake while airborne affects drag? How can I properly terminate an unused opamp? What happens if I move an object that has Darkness cast on it? Where do the Laws of Physics come from? Why did Boeing shrink the bottom of the engine casing instead of the whole casing? Buck converter voltage inverter power glitch How was the first continuous communication with LEO spacecraft established? Is it really true that nothing lasts forever? Centre of group with deficiency at least two (Progress on Murasugi's conjecture) Faithfulness between representation and KG-module What parts of code are protected by copyright? Is there any hermeneutical principle that would determine how much of Job's friends' speeches should be taken as divine instruction? The keys were thrown down a well. | .thrown /into/in/down into a well.? How to deal with a co-author that refuses to read a manuscript? Select foreign language for all cells in one column of table? Dynamic Arrays with Count / Capacity in C How do switch mode power supplies solve the half energy loss problem in the charging of a capacitor? more hot questions Question feed

Subscribe to RSS

Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default

Stack Overflow

Questions Help Chat

Products

Teams Advertising Talent

Company

About Press Work Here Legal Privacy Policy Terms of Service Contact Us Cookie Settings Cookie Policy

Stack Exchange Network

Technology Culture & recreation Life & arts Science Professional Business API Data Blog Facebook Twitter LinkedIn Instagram

button button click

Welcome to button button click