按钮onclick无法在第一次单击时工作

Posted 2021-03-29

我的button.onclick在第一次点击时不起作用，但它适用于第二次。我使用警报进行检查，甚至警报在第一次点击时也不起作用，但在第二次点击时工作。这里是应用程序的链接，以防你需要它 - http://silentarrowz.imad.hasura-app.io/news你能告诉我什么是错的吗？这是代码

window.onclick = function () {
    var displayNews = document.getElementById('currentNews');
    var newsButton = document.getElementById('getnews');
    newsButton.onclick = function () {
        alert('the button is clicked');
        var newsxr = new XMLHttpRequest();
        newsxr.onreadystatechange = function () {
            if (newsxr.readyState === XMLHttpRequest.DONE && newsxr.status === 200) {
                var currentNews = JSON.parse(newsxr.responseText);
                var currentArticles = currentNews['articles'];
                var numberArticles = currentNews['articles'].length;
                var newsDisplay = '';
                var author;
                var title;
                var description;
                var urlToImage;
                for (var i = 0; i < numberArticles; i++) {
                    author = currentArticles[i]['author'];
                    title = currentArticles[i]['title'];
                    description = currentArticles[i]['description'];
                    urlToImage = currentArticles[i]['urlToImage'];
                    newsDisplay = newsDisplay + "<p>" + "<span class='title'>" + title + "</span>" + "<br>" + description + "<br>" + "<img src='" + urlToImage +
                        "'</img>" + "</p>";
                }
                alert('displaying the news now');
                console.log('current news is : ', currentNews);
                displayNews.innerhtml = newsDisplay;
            }
        }; //on state change
        newsxr.open('GET', 'https://newsapi.org/v1/articles?source=national-geographic&sortBy=top&apiKey=1af110441a8e4f72925f78344e58c2a4', true);
        newsxr.send(null);
    }; //button onclick function ends
}; // window onclick function ends

答案

关于您的代码的真相如下..

1. 您正在为窗口分配onclick事件。当您单击窗口时，它会获取按钮ID，然后为您的按钮分配onclick事件。
2. 只有在窗口中的任何位置（浏览器用户界面）单击时，您的按钮才有效。你可以尝试看看

解

删除on window.onclick事件的东西。

这应该是您应该在编辑器中看到的唯一代码，以使工作正常。

var displayNews = document.getElementById('currentNews');
var newsButton = document.getElementById('getnews');
newsButton.onclick = function(){
    alert('the button is clicked');
    var newsxr = new XMLHttpRequest();
    newsxr.onreadystatechange = function(){
        if(newsxr.readyState ===XMLHttpRequest.DONE && newsxr.status ===200){
            var currentNews = JSON.parse(newsxr.responseText);
            var currentArticles = currentNews['articles'];
            var numberArticles = currentNews['articles'].length;
            var newsDisplay ='';
            var author;
            var title;
            var description;
            var urlToImage;
            for(var i=0;i<numberArticles;i++){
                author = currentArticles[i]['author'];
                title = currentArticles[i]['title'];
                description = currentArticles[i]['description'];
                urlToImage = currentArticles[i]['urlToImage'];
                 newsDisplay = newsDisplay + "<p>"+"<span class='title'>"+  title+"</span>"+  "<br>"+description+"<br>"+"<img src='"+urlToImage+"'</img>"+"</p>";
            }
            alert('displaying the news now');
            console.log('current news is : ',currentNews);
            displayNews.innerHTML = newsDisplay;
        }
    };//on state change

    newsxr.open('GET','https://newsapi.org/v1/articles?source=national-geographic&sortBy=top&apiKey=1af110441a8e4f72925f78344e58c2a4',true);
    newsxr.send(null);
};
//button onclick function ends

我希望这是解释性的

另一答案

因为第一次单击是window.onclick = function()部分，它告诉窗口仅定义另一个单击事件，然后当您第二次单击时，真正的单击事件将起作用。

删除窗口点击事件已经足够了。

附：我不明白为什么窗口点击事件在您的代码中有意义。