innerHTML funktioniert nicht richtig

Question

Dies ist meine erste Veröffentlichung im Forum, also bitte seien Sie nett und lassen Sie mich wissen, wenn ich eine Art von Fehler gemacht habe.

Also arbeite ich an einer Website, die dynamisch ihren Inhalt ändert, der von einer SQL-Datenbank kommt. Ich habe es geschafft, die Daten vom Server als JSON-Datei zu erhalten und meine nächste Aufgabe ist es, die Seiten DOM-Elemente mit dem empfangenen Inhalt zu füllen. Das Problem ist, dass meine innerHTML-Befehle nicht funktionieren, während meine Teile, wo ich die href eines Elements ändern, funktionieren. Ich bin wirklich verwirrt und kann nicht herausfinden, was das Problem ist. Vielleicht können Sie mir helfen.

Das HTML sieht etwas wie diese, nur dort vorstellen, dass es Elemente sind fünf os:

<div id="fact_0"> 
    <img id="fact_0_icon" src="media/icons/icon_1.svg"/> 
    <p id="fact_0_text"></p> 
    <img id="fact_0_article" src="media/icons/icon_2.svg"/> 
</div> 

Die Javascript sieht wie folgt aus:

function documentChange (data) { 
    for(let i=0;i<5;i++) { 
     document.getElementById("fact_"+i+"_text").innerHMTL= data[i].text; 
     document.getElementById("fact_"+i+"_icon").setAttribute("src", "media/icons/"+data[i].icon+".svg"); 
     document.getElementById("fact_"+i+"_share").setAttribute("href", data[i].url); 
     switch(data[i].category) { 
      case "1": 
       document.getElementById("fact_"+i+"_icon").style.color="#4cc40f"; 
       break; 
      case "2": 
       document.getElementById("fact_"+i+"_icon").style.color="#6767d2"; 
       break; 
      case "3": 
       document.getElementById("fact_"+i+"_icon").style.color="#08B8DA"; 
       break; 
      case "4": 
       document.getElementById("fact_"+i+"_icon").style.color="#e60909"; 
       break; 
      case "5": 
       document.getElementById("fact_"+i+"_icon").style.color="#a72aa4"; 
       break; 
      default: 
       document.getElementById("fact_"+i+"_icon").style.color="#4cc40f";}}} 

Answer 1

Sie haben einen Tippfehler: Sie geben HMTL anstelle von HTML.

Verwenden Sie also .innerHTML anstelle von .innerHMTL.

Hier ist die vollständige Lösung:

function documentChange (data) { 
    for(let i=0;i<5;i++) { 
     document.getElementById("fact_"+i+"_text").innerHTML= data[i].text; 
     var icon = document.getElementById("fact_"+i+"_icon"); 
     icon.src = "media/icons/"+data[i].icon+".svg"; 
     //document.getElementById("fact_"+i+"_icon").setAttribute("src", "media/icons/"+data[i].icon+".svg"); 
     document.getElementById("fact_"+i+"_share").setAttribute("href", data[i].url); 
     switch(data[i].category) { 
      case "1": 
       document.getElementById("fact_"+i+"_icon").style.color="#4cc40f"; 
       break; 
      case "2": 
       document.getElementById("fact_"+i+"_icon").style.color="#6767d2"; 
       break; 
      case "3": 
       document.getElementById("fact_"+i+"_icon").style.color="#08B8DA"; 
       break; 
      case "4": 
       document.getElementById("fact_"+i+"_icon").style.color="#e60909"; 
       break; 
      case "5": 
       document.getElementById("fact_"+i+"_icon").style.color="#a72aa4"; 
       break; 
      default: 
       document.getElementById("fact_"+i+"_icon").style.color="#4cc40f";}}} 

Answer 2

Es ist Ihre Tippfehler.

Verwenden Sie .innerHTML und führen Sie es erneut aus.

document.getElementById("fact_"+i+"_text").innerHTML= data[i].text; 

Answer 3

Ersetzen Sie diese mit Ihrer Linie document.getElementById("fact_"+i+"_text").innerHTML= data[i].text;