how to cause button to automatically click it self

Question

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>

It's unlikely we need to see your css here. Could you please reduce this to a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? — stealththeninja, Jun 25 '19 at 02:24
why do you need 2 button separately? Is there any other action for second button? — Irin, Jun 25 '19 at 02:27
I doubt you need it clicked. You could define both handlers and let them call each other. — ChiefTwoPencils, Jun 25 '19 at 02:27

score 2 · Accepted Answer · answered Jun 25 '19 at 02:31

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>

score 0 · Answer 2 · answered Jun 25 '19 at 02:34

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

how to cause button to automatically click it self

2 Answers2