Konsole loggt nicht XMLHttpRequest Antworttext, wenn Listenelement geklickt wird

Ich bin sehr neu in der Programmierung im Allgemeinen, so dass einige von Ihnen dieses Problem leicht behoben finden können, aber ich habe eine Menge Sachen ausprobiert und im Internet gesucht für Antworten aber nichts gefunden. Ich versuche Daten auf meiner Website zu laden, die für ein Schulprojekt gedacht sind. Um dies zu tun, erhalte ich die Daten von einer xmlhttprequest, und mein Plan ist es, den aktuellen Text auf der Seite durch den aus der Anfrage zu ersetzen. Der Befehl xmlhttprequest wird ausgeführt, wenn auf ein Listenelement geklickt wird. Das Projekt befindet sich in einem sehr frühen Stadium.Konsole loggt nicht XMLHttpRequest Antworttext, wenn Listenelement geklickt wird

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hyr Stuga!</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body style="background-image:url(background.jpg)"> 
    <!-- Menu that will remain static --> 
    <ul id="navbar"> 
     <li id="0"><a href="">Hem</a></li> 
     <li id="1"><a href="">Område</a></li> 
     <li id="2"><a href="">Bilder</a></li> 
     <li id="3"><a href="">Kontakt</a></li> 
     <li id="4" style="color:white" class="active"><a href="">Recensioner</a></li> 
    </ul> 
    <script src="main.js"></script> 
    <!-- Text to be shown on startpage of page --> 
    <h1>Välkommen!</h1> 
    <p>Klicka på någon av menyerna för att får veta mer!</p> 
</body> 
</html>

Hier ist die js in die HTML-Datei verbunden:

//List that contains all the items in my Navigation bar 
var navBarItems = []; 
for(var i=0; i < 5; i++){ 
    navBarItems.push(i); 
} 
for(var i=0; i<navBarItems.length;i++){ 
    navBarItems[i] = document.getElementById(i); 
} 


//When you click a navigation bar item, in this case the "hem" item, the console should log some JSON 
navBarItems[0].addEventListener("click", function(){ 
    var request = new XMLHttpRequest(); 
    request.open("GET", "https://raw.githubusercontent.com/finblomma/Rudqvist/master/data.json"); 
    request.onload = function(){ 
     var recievedData = JSON.parse(request.responseText); 
     console.log(recievedData[0]) 
    }; 
    request.send(); 
}); 

navBarItems[1].addEventListener("click", function(){ 
    //... 
}) 

//...

Mein Problem ist, dass die Konsole nicht alles anmeldet. Ich habe versucht, die Anfrage mit dem "onload" -Attribut in HTML zu senden, und das scheint gut zu funktionieren. Aber ich möchte es laden, wenn ich auf einen Listeneintrag klicke. Wer hier weiß, was ich falsch mache?

Quelle

2017-05-31 David Carlsson

Das Problem besteht darin, dass beim Klicken auf die Verknüpfung die Seite neu geladen wird, bevor das Skript ihre Aufgabe erfüllen kann. Was Sie tun müssen, ist zu verhindern, dass die Verbindung ihr Standardverhalten ausführt. Dies kann mit der Javascript-Funktion event.preventDefault(); erreicht werden. Diese Funktion nimmt ein Ereignis und verhindert das Auftreten des Standardverhaltens. Hier finden Sie einige Lesestoff die Funktion weiter zu erklären: https://www.w3schools.com/jsref/event_preventdefault.asp

Also, was Sie tun müssen, ist speichern die addEventListener Funktionen Ereignis in einer Variablen, die in diesem Fall ich e verwendet haben. Dann können Sie in Ihrem Ereignis-Listener einfach e.preventDefault();

navBarItems[0].addEventListener("click", function(e){ 
    // Here is the peventDefault function. The e variable in the function above holds the event. 
    e.preventDefault(); 
    var request = new XMLHttpRequest(); 
    request.open("GET", "https://raw.githubusercontent.com/finblomma/Rudqvist/master/data.json"); 
    request.onload = function(){ 
     var recievedData = JSON.parse(request.responseText); 
     console.log(recievedData[0]) 
    }; 
    request.send(); 
}); 

navBarItems[1].addEventListener("click", function(){ 
})

tun

Quelle

2017-05-31 12:24:15 WizardCoder

Konsole loggt nicht XMLHttpRequest Antworttext, wenn Listenelement geklickt wird

Antwort

Verwandte Themen