如何使按钮自行自动单击

时间：2019-06-25 02:21:16

标签： javascript html

用户单击一个按钮后，另一个按钮应自行单击它以显示鼓舞人心的报价。当用户单击网页上的按钮时，将显示报价。另一个按钮应自行点击以自动在屏幕上显示报价。用户不必单击两个按钮都可以在屏幕上显示两个报价。用户将单击一个按钮，另一个按钮应自动单击自身以显示报价。我一直在努力寻找一种解决方法，以解决自动单击按钮的问题，但是没有运气。我如何获得一个按钮以自行单击？谢谢您的帮助。 

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>

2 个答案:

答案 0 :(得分：2)

添加了这一行：

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>

答案 1 :(得分：0)

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

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

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

相关问题
最新问题