Question

我已经尝试了几种不同的方法。我正在尝试为一个按钮创建一个事件，该事件可以切换元素可见性的打开和关闭。由于某些原因，当我使用.onclick时，它工作正常。每次单击按钮时，都会按预期切换元素可见性。但是，当我尝试将.onClick交换为addEventListener时，必须多次单击该按钮才能使其工作。似乎是断断续续的。第一次单击可能会起作用，然后在下次单击时可能需要2或3。

function showTime() {
    options = {weekday: 'short', year: 'numeric', month: 'short', day: '2-digit'}
    var date = new Date();
    var hr = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var period = "am";

    if(hr == 0){
        hr = 12;
    }

    if(hr > 12){
        hr = hr - 12;
        period = "pm";
    }

    min = (min < 10) ? "0" + min : min;
    sec = (sec < 10) ? "0" + sec : sec;

    var time = hr + ":" + min + ":" + sec + " " + period; 
    document.getElementById("displayTime").innerHTML = time;
    document.getElementById("displayDate").innerHTML = date.toLocaleDateString("en-US", options);

    
    var startTime = setTimeout(showTime, 1000);

    //Set Alarm
    var set = document.getElementById("setButton");

    set.onclick = function(){
        var timeVis = document.getElementById("displayTime");
        if (timeVis.style.display !== 'none') {
            timeVis.style.display = 'none';
        } else {
            timeVis.style.display = 'block';
        }        
    }

}

showTime();

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="utf-8"/>
        <title> Clock </title>
    </head>
    <body>
        <div id="displayTime" onLoad="showTime()" ></div>
        <input type="text" id="setInput">
        <button id="setButton">set</button>
        <div id="displayDate"></div>
        <script src="DigitalClock.js"></script>

    </body>
</html>

以下是我尝试使用的两种替代方法添加事件监听器

var set = document.getElementById("setButton");

set.addEventListener('click', function(){
    var timeVis = document.getElementById("displayTime");
    if (timeVis.style.display !== 'none') {
        timeVis.style.display = 'none';
    } else {
        timeVis.style.display = 'block';
    }        
});

var set = document.getElementById("setButton");
var timeVis = document.getElementById("displayTime");

function vis(){
    if (timeVis.style.display !== 'none') {
        timeVis.style.display = 'none';
    } else {
        timeVis.style.display = 'block';
    }        
};

timeVis.addEventListener('click', vis);

Answer 1

问题在于您在addEventListener函数中使用了showTime()，因此每次执行showTime（）时，您都将绑定一个新的侦听器。

现在是因为这个原因：

var startTime = setTimeout(showTime, 1000);

该函数每秒执行一次。结果，几秒钟后，当您单击按钮一次时，切换部分被执行了多次。

另一方面，使用set.onclick，您仅重新定义了元素的onclick属性，这就是为什么它按预期工作的原因。

onclick可以正常触发，但是addEventListener需要多次单击才能起作用

1 个答案: