javascript 使用类名在单击按钮时触发弹出消息

inkz8wg9 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(135)

我想触发一个弹出消息，每当人们点击一个按钮。
我的扣子是
class="send:after"
我的弹出JavaScript如下：

<script type="text/javascript">
    
    
window.addEventListener("click", function(){ 
    setTimeout(
        function open(event){
            document.querySelector(".popup").style.display = "block";
        },
        2000 
    )
});

document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});
    </script>

我怎样才能将按钮类分配给弹出窗口，使它在人们每次单击按钮时都出现？
我试过这个方法，但它不起作用

<script type="text/javascript">
    
    var elem = document.getElementsByClassName('send:after');

for(var i = 0; i < elem.length; i++) {
 elem[i].addEventListener("click", function(){ 
    
            document.querySelector(".popup").style.display = "block";
       

     
 }, false);
}
    


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});
    </script>

希望能在这方面得到一些指导。谢谢你

JavaScript

来源：https://stackoverflow.com/questions/76296331/trigger-pop-up-message-whenever-a-button-is-click-by-using-class-name

1条答案

按热度按时间

0lvr5msh1#

注意：在下面的答案中，我假设“弹出”是指警报。

一键

如果你有只有一个按钮类class="send:after"的JavaScript代码可能看起来像这样。

document.getElementsByClassName('send:after')[0].addEventListener("click", myPopupFunction);

function myPopupFunction() {
  alert('Hey, you clicked on my button!')
}

<html>
  <body>
    <input type="button" class="send:after" id="myBtn" value="Search">
  </body>
</html>

您也可以使用querySelector方法来获取按钮元素。注意，在本例中，我们需要将\\添加到类选择器中，以便转义类名中的冒号-参见this answer。正如你所看到的，一般来说，在类名中使用冒号不是一个好主意。使用querySelector的代码可能如下所示。

document.querySelector('.send\\:after').addEventListener("click", myPopupFunction)
function myPopupFunction() {
  alert('Hey, you clicked on my button!')
}

<html>
  <body>
    <input type="button" class="send:after" id="myBtn" value="Search">
  </body>
</html>

您也可以直接在HTML中定义弹出窗口，例如：

<html>
  <body>
    <input type="button" class="send:after" id="btnSearch" value="Search" onclick="alert('Hey, you clicked on my button!')">
  </body>
</html>

多个按钮

如果你有多个按钮类class="send:after"的JavaScript代码可能看起来像这样。

var all_button_elements = document.getElementsByClassName('send:after')

for(var i = 0; i < all_button_elements.length; i++) {
  all_button_elements[i].addEventListener("click", myPopupFunction)
}

function myPopupFunction() {
  alert('Hey, you clicked on my button!')
}

<html>
  <body>
    <input type="button" class="send:after" id="myBtn" value="Search">
    <input type="button" class="send:after" id="myBtn2" value="Search2">
    <input type="button" class="send:after" id="myBtn3" value="Search3">
  </body>
</html>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 使用类名在单击按钮时触发弹出消息

1条答案

一键

多个按钮

相关问题

热门标签

最新问答