Schaltfläche onclick funktioniert nicht beim ersten Klick

Question

mein button.onclick funktioniert nicht beim ersten Klick, aber es funktioniert bei der zweiten. Ich habe eine Warnung verwendet, um zu überprüfen, und sogar die Warnung funktioniert nicht auf den ersten Klick, funktioniert aber auf den zweiten Klick. hier ist der Link zur App, falls Sie es brauchen - http://silentarrowz.imad.hasura-app.io/news können Sie mir sagen, was los ist ?? Hier ist der Code

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 

Answer 1

Die Wahrheit über Ihren Code ist das folgende ..

1. Sie sind ein Onclick-Ereignis zum Fenster zuweisen. Wenn Sie auf das Fenster klicken, wird die ID der Schaltfläche angezeigt, die Ihrer Schaltfläche ein onclick-Ereignis zuweist.
2. Ihre Schaltfläche funktioniert nur, wenn Sie irgendwo in das Fenster klicken (die Benutzeroberfläche Ihres Browsers). Sie können es versuchen, und

SOLUTION

entfernen Sie die auf window.onclick Ereignis Sachen sehen.

Dies sollte der einzige Code sein, den Sie in Ihrem Editor sehen sollten, damit die Dinge funktionieren.

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 

Ich hoffe, das war erklärend

Answer 2

Da der erste Klick window.onclick = function() Teil ist, der das Fenster erzählt nur einen weiteren Klick-Ereignis zu definieren, und dann das eigentliche Klick-Ereignis werden, wenn Sie das zweite Mal klicken.

Das Löschen des Fensterklickereignisses reicht bereits aus.

P.S. Ich sehe nicht, warum Fensterklick-Ereignis in Ihrem Code sinnvoll ist.