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

时间:2016-11-05 16:29:38

标签: javascript button onclick

我的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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

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

  1. 您正在为窗口分配onclick事件。当您单击窗口时,它会获取按钮ID,然后为您的按钮分配onclick事件。
  2. 您的按钮仅在您单击窗口中的任何位置(浏览器用户界面)时有效。你可以尝试看看
  3. 删除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
    

    我希望这是解释性的