2016-03-23 12 views
0

Ich bin mir nicht sicher warum, aber bevor ähnliche Code funktionierte. Der Server wurde neu gestartet und der Code funktioniert überhaupt nicht. Ich habe das Problem in dem Code unten auf etwas falsch mit dem DOM, speziell das Div mit ID "Thumbnails" isoliert. Ich konnte das innereHTML des Divs nicht ändern, egal was, auch in der Google Chrome-Konsole (mit document.getElementById ("Thumbnails"). InnerHTML). Das div ist leer (das p-Tag mit "hi" wird entfernt) und die Variable "output" wird auf das gesetzt, was es sein soll (nicht leer). Wer weiß warum?DOM nicht aktualisieren

Wenn Sie es selbst testen möchten, gehen Sie zu quantumquantonium.ddns.net/images_and_videos/screenshots/

<h1>Screenshots</h1> 
<div id = "thumbnails" align = "center"><p>hi</p></div> 
<div class="gallery" align="center"> 
    <img name="preview" id="preview" alt=""></img> 

</div> 

<script type="text/javascript"> 
var xhttp = new XMLHttpRequest(); 
var output; 
function update(){ 
    xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       console.log("readystate = 4"); 
       output = xhttp.responseText; 
       console.log(output); 
       document.getElementById("thumbnails").innerHTML = output; 
      } 
    } 
} 
function sendInfo(){ 
    xhttp.open("GET","http://quantumquantonium.ddns.net/images_and_videos/screenshots/php.php" ,true); 
    xhttp.send(); 
    update(); 
} 

sendInfo(); 
</script> 
+1

nicht sicher, ob der Abstand zwischen 'id = "Thumbnails" 'Ihr Problem verursacht, aber es sieht ziemlich schlecht aus –

+1

Ein wahrscheinlicher Täter ist die [Richtlinie gleichen Ursprungs] (https://developer.mozilla.org/en- US/docs/Web/Sicherheit/Same-origin_policy). Außer wenn "http: // quantumquantonium.ddns.net" auch der Ort ist, auf dem diese Seite gehostet wird, ist sie begrenzt, wenn sie nicht daran gehindert wird, Anfragen an sie zu stellen. Überprüfen Sie die Entwicklerwerkzeuge Ihres Browsers auf Fehler. –

+0

@TimOgilvy: Das [ist gültiger HTML-Code] (https://www.w3.org/TR/html5/syntax.html#attributes-0). – Bergi

Antwort

4

Das Problem ist nicht in Code Sie verwenden es in Daten wieder vom Server kommt, hat es ungültige HTML (double(") und single quotes(') sind nicht ausgewogen und Sie doppelte Anführungszeichen verwenden sollten, ist hier Attributwerte in html) ein Teil von Markup zu begrenzen:

<img onmouseover= " preview.src='2015-01-25_00004.jpg" name=2015-01-25_00004.jpg src=2015-01-25_00004.jpg alt='' style = 'width:50px;height:50px;> 
<img onmouseover= " preview.src='2015-01-25_00006.jpg" name=2015-01-25_00006.jpg src=2015-01-25_00006.jpg alt='' style = 'width:50px;height:50px;> 
<img onmouseover= " preview.src='2015-01-29_00003.jpg" name=2015-01-29_00003.jpg src=2015-01-29_00003.jpg alt='' style = 'width:50px;height:50px;> 
<img onmouseover= " preview.src='2015-01-29_00004.jpg" name=2015-01-29_00004.jpg src=2015-01-29_00004.jpg alt='' style = 'width:50px;height:50px;> 

Korrigieren Sie Ihren HTML-Code. ;)

Sie können diese HTML-Format versuchen:

<img onmouseover="preview.src='2015-01-29_00004.jpg'" name="2015-01-29_00004.jpg" src="2015-01-29_00004.jpg" alt="" style="width:50px; height:50px;"> 
+0

Danke, aber wo könnte der Fehler im HTML sein? Und warum wird kein fehlerhafter HTML-Code im DOM gedruckt? Weigert es sich, mit einem HTML-Fehler zu drucken? –

+0

Da dies ein HTML-Parsing-Fehler ist, warnt der Browser nicht davor und wenn es ein JavaScript-Fehler Browser würde warnen; – itzmukeshy7

+1

@AndyHerbert Fehlende abschließende Anführungszeichen für jedes 'style' Attribut und für die Zeichenfolge in jedem' onmouseover'. –

1

Das Bündel von

<img onmouseover= " preview.src='2015-01-25_00004.jpg" name=2015-01-25_00004.jpg src=2015-01-25_00004.jpg alt='' style = 'width:50px;height:50px;> 

Tags Sie von Ihrem API bekommen ist stark fehlerhaft. Kein Wunder, dass der HTML-Parser sie komplett zerlegt und Sie mit einem leeren DOM verlässt.

Verwandte Themen