CODEWITHSUNDEEP
javascripthtmljson
ben jay hutton
ben jay hutton

Reputation: 404

How can I append search results to a div tag and then overwrite the contents on the next search?

I have tried searching for an answer but I'm not sure how one would phrase the question, so I have had no luck find it.

So please forgive me if there is an answer lying around already ^_^

I'm using XMLHttpRequest() to get JSON data from: http://api.mtgapi.com and displaying the results in a div tag with the id 'demo'

all works fine and the results are appended at the bottom. However I would like for further results to overwrite the previous ones as supposed to appending it at the bottom. I have tried using:

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

but sadly i havn't gotten any where. Can someone suggest something?

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>

Upvotes: 0

Views: 159

Answers (1)

jeffjenx
jeffjenx

Reputation: 17457

Use innerHTML instead of value:

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

Upvotes: 1

Related Questions