Wie kann ich Suchergebnisse an ein Div-Tag anhängen und dann den Inhalt bei der nächsten Suche überschreiben?

Ich habe versucht, nach einer Antwort zu suchen, aber ich bin nicht sicher, wie man die Frage formulieren würde, also hatte ich kein Glück, es zu finden.Wie kann ich Suchergebnisse an ein Div-Tag anhängen und dann den Inhalt bei der nächsten Suche überschreiben?

Also bitte verzeiht mir, wenn es eine Antwort ist schon rumliegen^_^

Ich bin mit XMLHttpRequest(), um JSON-Daten aus zu erhalten: http://api.mtgapi.com und Anzeigen der Ergebnisse in einem div-Tag mit der ID ' demo '

alles funktioniert gut und die Ergebnisse sind an der Unterseite angehängt. Allerdings möchte ich für weitere Ergebnisse die vorherigen überschreiben, die es unten anhängen sollen. Ich habe versucht, mit:

document.getElementById("demo").value = " ";

aber leider havn't i, wo jeder bekommen. Kann jemand etwas vorschlagen?

Code:

<!DOCTYPE html> 
<html> 
<head> 
<title>Magic the Gathering</title> 
<script> 
function myFunction() { 
    var searching = document.getElementById("search"); 
    var xmlhttp = new XMLHttpRequest(); 
    if (window.location.protocol != "https:"){ 
     var url= 'http://api.mtgapi.com/v2/cards?name=' + searching.value; 
    } 
    else{ 
     var url= 'https://api.mtgapi.com/v2/cards?name=' + searching.value; 
    } 
    console.log(url); 
    xmlhttp.onreadystatechange = function(){ 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      var myArr = JSON.parse(xmlhttp.responseText); 

      for (i = 0; i < myArr.cards.length; i++){ 
       var para = document.createElement("P"); 
       var br = document.createElement("br"); 
       var att = document.createAttribute("id"); 
       att.value = i; 
       para.setAttribute("id", i); 
       console.log(para); 
       para.innerHTML = 
       "Artist: " + myArr.cards[i].artist + "<br />" + 
       "Border: " + myArr.cards[i].border + "<br /> "+ 
       "Colour: " + myArr.cards[i].colors + "<br /> " + 
       "Original Text: " + myArr.cards[i].originalText + "<br /> " + 
       "Original Type: " + myArr.cards[i].originalType + "<br />" + 
       "Power: " + myArr.cards[i].power + "<br />"; 
       document.getElementById("demo").appendChild(para); 
       document.getElementById("demo").appendChild(br); 
      } 
     } 
    }; 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 
} 

</script> 
</head> 

<body> 

<h2>Magic the Gathering</h2> 

<h4>Search Magic Api</h4> 
<form method="post" action="#" name="magicapi"> 
Search Api: <input type="text" id="search" name="search" value=""> 
<input type ="button" name ="mtgapi" onclick='myFunction()' value ="search mtg api"> 
</form> 

<div id="demo"></div> 

</body> 
</html>

Quelle

2016-05-10 ben jay hutton

Nur ein FYI, sagt der HTML-Spezifikation Sie können diese 'if (window.location.protocol verringern =„https: ") { var url = 'http://api.mtgapi.com/v2/cards?name=' + suchender.Wert; } sonst { var url = 'https://api.mtgapi.com/v2/cards?name=' + searching.value; } 'zu einfach' var url = '//api.mtgapi.com/v2/cards?name=' + searching.value; ' –

vielen Dank :-) –

' myArr.cards.length' ist undefined für Werte wo keine Karten zurückgegeben werden. Sie sollten 'if (myArr && myArr.cards)' vor der Verwendung der Länge überprüfen. Sie können auch auf 'document.getElementById (" demo ") zugreifen. InnerHTML ="
"+ myArr.query [0] .value +" Not Found "+"
";' für ein Beispiel in einem else für das if wenn ist der Fall. Codepen-Beispiel: http://codepen.io/MarkSchultheiss/pen/zqbKzx?editors=1010 Geben Sie einen Wert "Jace" ein, um die Arbeit zu sehen, und "Jace, der Mind Sculptor", um etwas zurückzugeben. –

Verwenden innerHTML statt value:

document.getElementById("demo").innerHTML = '';

Quelle

2016-05-10 18:38:49 Quantastical

Es funktioniert danke, obwohl seltsam, wenn ich das Javascript in eine andere Datei, sogar mit Ihrer Antwort fügt es noch an das div-Tag. Aber ich werde es herausfinden –

Wie kann ich Suchergebnisse an ein Div-Tag anhängen und dann den Inhalt bei der nächsten Suche überschreiben?

Antwort

Verwandte Themen