-2

After a user click a button, the other button should click it self to display a inspirational quote. when the user click a button on the web page a quote will display. The other button should click on it self to automatically display a quote on to the screen. The user should not have to click both buttons to get both quotes to display on screen. The user will click a button and the other button should automatically click it self to display a quote. I have been trying very hard to find a solution to a self clicking button, but with no luck. How do I get a button to click it self? Thank you for your help. 

let p = document.querySelector("#Quote"); let p2 = document.querySelector("#Quote2"); var messageButton1 = document.querySelector(".messageButton1"); var messageButton2 = document.querySelector(".messageButton2"); messageButton1.addEventListener("click", function() { p.textContent = "The Way to Get Started Is To Quit Talking And Begin Doing"; //if user clicked the messageButton2, //it's this button turn to click it self to display message }); messageButton2.addEventListener("click", function() { p2.textContent = "Don’t Let Yesterday Take Up Too Much Of Today"; //if user clicked the messageButton1, //it's this button turn to click it self to display message });
.myButton { -moz-box-shadow: inset 0px 1px 0px 0px #bee2f9; -webkit-box-shadow: inset 0px 1px 0px 0px #bee2f9; box-shadow: inset 0px 1px 0px 0px #bee2f9; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf)); background: -moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: -webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: -o-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: -ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf', GradientType=0); background-color: #63b8ee; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #3866a3; display: inline-block; cursor: pointer; color: #14396a; font-family: Arial; font-size: 15px; font-weight: bold; padding: 6px 24px; text-decoration: none; text-shadow: 0px 1px 0px #7cacde; } .myButton:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee)); background: -moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: -webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: -o-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: -ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee', GradientType=0); background-color: #468ccf; } .myButton:active { position: relative; top: 1px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Self Click</title> </head> <body> <h1>Other button self click it self</h1> <button class="messageButton1 myButton">Click for message</button> <span id="Quote"></span> <br><br> <button class="messageButton2 myButton">Click for message</button> <span id="Quote2"></span> <p>Cick only one button. The other button will click it self</p> </body> </html>

Improve this question
3
  • 3
    It's unlikely we need to see your css here. Could you please reduce this to a minimal, reproducible example? Commented Jun 25, 2019 at 2:24
  • 2
    why do you need 2 button separately? Is there any other action for second button? Commented Jun 25, 2019 at 2:27
  • 2
    I doubt you need it clicked. You could define both handlers and let them call each other. Commented Jun 25, 2019 at 2:27

2 Answers 2

Reset to default
2

Added this line:

messageButton2.click(); //Added this line

Full example: 

let p = document.querySelector("#Quote"); let p2 = document.querySelector("#Quote2"); var messageButton1 = document.querySelector(".messageButton1"); var messageButton2 = document.querySelector(".messageButton2"); messageButton1.addEventListener("click", function() { p.textContent = "hello"; messageButton2.click(); //Addedthis line //if user clicked the messageButton2, //it's this button turn to click it self to display message }); messageButton2.addEventListener("click", function() { p2.textContent = "Don’t Let Yesterday Take Up Too Much Of Today"; //if user clicked the messageButton1, //it's this button turn to click it self to display message });
.myButton { -moz-box-shadow: inset 0px 1px 0px 0px #bee2f9; -webkit-box-shadow: inset 0px 1px 0px 0px #bee2f9; box-shadow: inset 0px 1px 0px 0px #bee2f9; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf)); background: -moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: -webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: -o-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: -ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf', GradientType=0); background-color: #63b8ee; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #3866a3; display: inline-block; cursor: pointer; color: #14396a; font-family: Arial; font-size: 15px; font-weight: bold; padding: 6px 24px; text-decoration: none; text-shadow: 0px 1px 0px #7cacde; } .myButton:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee)); background: -moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: -webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: -o-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: -ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee', GradientType=0); background-color: #468ccf; } .myButton:active { position: relative; top: 1px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Self Click</title> </head> <body> <h1>Other button self click it self</h1> <button class="messageButton1 myButton">Click for message</button> <span id="Quote"></span> <br><br> <button class="messageButton2 myButton">Click for message</button> <span id="Quote2"></span> <p>Cick only one button. The other button will click it self</p> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Define the handlers separately and have both buttons call both handlers:

function setP1() { p.textContent = "The Way to Get Started Is To Quit Talking And Begin Doing"; } function setP2() { p2.textContent = "The Way to Get Started Is To Quit Talking And Begin Doing"; } messageButton1.addEventListener("click", function() { setP1() setP2() }); messageButton2.addEventListener("click", function() { setP1() setP2() });

By the way, as the coder you have control over your components. You don't need to simulate user input to make stuff happen on your page

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.