0
私は答えを検索しようとしましたが、どのように質問がフレーズになるのかわからないので、私はそれを見つけることができませんでした。divタグに検索結果を追加して、次の検索時にその内容を上書きするにはどうすればよいですか？
すでに転がっ答えがあるのであれば、私を許してください^ _^
IからJSONデータを取得するためにはXMLHttpRequest（）を使用しています：http://api.mtgapi.com とidを持つdivタグで結果を表示します "デモ '
すべて正常に動作し、結果は下部に追加されます。 しかし私は、それを最後に上書きすることになっている前のものを上書きするさらなる結果を望みます。 私が使用して試してみました：
document.getElementById("demo").value = " ";
を残念ながら、私は任意の場所を得てやりなさい。誰かが何か提案することはできますか
コード：
<!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>
だけFYI、HTMLの仕様では、この 'の場合（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; } '単純に' var url = '//api.mtgapi.com/v2/cards?name=' + searching.value; ' –
ありがとうたくさん:-) –
' myArr.cards.length'は値に対して未定義ですカードは返されません。長さを使用する前に 'if（myArr && myArr.cards）'をチェックする必要があります。 'document.getElementById（" demo "）にアクセスすることもできます。innerHTML ="
"+ myArr.query [0] .value +" Not Found "+"
";その場合です。 Codepenの例：http://codepen.io/MarkSchultheiss/pen/zqbKzx?editors=1010その作品を見るには "Jace"、何かを返すには "Jace、Mind Sculptor"という値を入力してください。 –