如何使按钮自动单击它自己[重复]答案

【问题标题】：how to cause button to automatically click it self [duplicate]如何使按钮自动单击它自己[重复]
【发布时间】：2019-06-25 02:21:16
【问题描述】：

用户单击一个按钮后，另一个按钮应自行单击以显示励志名言。当用户单击网页上的按钮时，将显示报价。另一个按钮应自行单击以在屏幕上自动显示报价。用户不必单击这两个按钮来使两个引号都显示在屏幕上。用户将单击一个按钮，另一个按钮应自动单击它以显示报价。我一直在努力寻找自点击按钮的解决方案，但没有运气。我如何获得一个按钮来自己点击它？感谢您的帮助。

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>

【问题讨论】：

我们不太可能需要在这里查看您的 CSS。你能把这个减少到minimal, reproducible example吗？
为什么需要2个按钮？第二个按钮还有其他操作吗？
我怀疑你需要点击它。您可以定义两个处理程序并让它们相互调用。

标签： javascript html

【解决方案1】：

添加了这一行：

messageButton2.click(); //Added this line

完整示例：

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>

【讨论】：

【解决方案2】：

分别定义处理程序并让两个按钮调用两个处理程序：

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() 
});

顺便说一句，作为编码人员，您可以控制自己的组件。您无需模拟用户输入即可在您的页面上进行操作

【讨论】：