如何在没有双击的情况下“刷新”div？

Question

I will try to make this as clear as I possibly can. But right now, I have a table being displayed when it's called into HTML. However, when someone types in a president name, I want the fully listed table to go away and display the results that is filtered after the person clicks on "Search for Presidents". I tried a conditional if else statement but it clears out the table (making it blank), then it makes me have to do another click, which then displays the filtered results. Is there any way of preventing that double click?

JSfiddle for viewing https://jsfiddle.net/rtomino/7Lod1szp/1/

The conditional I had but it makes me do the double click.

if (document.getElementById('presidentialTable').innerHTML !== "") {
    document.getElementById("presidentialTable").innerHTML = "";
} else {
    document.getElementById('presidentialTable').appendChild(table);
}

The HTML

<form>
    <label for="name">Name:</label> 
    <input id='input' placeholder="President Name" type="text"> 
    <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button" onclick="clearTable()">Clear</button>
    <div id="presidentialTable"></div>
</form>

The JS

function loadPresidents() {
"use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText,
            jsonResponse = JSON.parse(data),
            table = document.createElement('table');

        table.setAttribute('class', 'history');
        var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
        var capitalize = function(s) {
            return s.charAt(0).toUpperCase() + s.slice(1);
        };

        function filterPresidents(data) {
            var input = document.getElementById('input').value;
            return data.filter(function(historicalData) {
                return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
            });

        }

        var tr = document.createElement('tr');
        for (var i = 0; i < properties.length; i++) {
            var th = document.createElement('th');
            th.appendChild(document.createTextNode(capitalize(properties[i])));
            tr.appendChild(th);
        }

        table.appendChild(tr);

        var tr, row;
        var filtered = filterPresidents(jsonResponse["presidents"].president);
        for (var r = 0; r < filtered.length; r++) {
            tr = document.createElement('tr');
            row = filtered[r];
            for (var i = 0; i < properties.length; i++) {
                var td = document.createElement('td');
                td.appendChild(document.createTextNode(row[properties[i]]));
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }

        if (document.getElementById('presidentialTable').innerHTML !== "") {
            document.getElementById("presidentialTable").innerHTML = "";
        } else {
        document.getElementById('presidentialTable').appendChild(table);
        }
    }
};
xhttp.open("GET", "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
xhttp.send();
 }

 loadPresidents();

 function clearTable() {
    document.getElementById("presidentialTable").innerHTML = "";
 }

Answer 1

Try like this snippet.

You no need to add this condition

if (document.getElementById('presidentialTable').innerHTML !== "") {
   document.getElementById("presidentialTable").innerHTML = "";
} else {
   document.getElementById('presidentialTable').appendChild(table);
}

What this condition doing if there is a data than it will clear the table

So just add this line to top of your function it will works document.getElementById("presidentialTable").innerHTML = ""; on single click

Hope this will helps you

 function loadPresidents() { "use strict"; var xhttp = new XMLHttpRequest(); document.getElementById("presidentialTable").innerHTML = ""; xhttp.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { var data = this.responseText, jsonResponse = JSON.parse(data), table = document.createElement('table'); table.setAttribute('class', 'history'); var properties = ['number', 'name', 'date', 'took_office', 'left_office']; var capitalize = function(s) { return s.charAt(0).toUpperCase() + s.slice(1); }; function filterPresidents(data) { var input = document.getElementById('input').value; return data.filter(function(historicalData) { return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1; }); } var tr = document.createElement('tr'); for (var i = 0; i < properties.length; i++) { var th = document.createElement('th'); th.appendChild(document.createTextNode(capitalize(properties[i]))); tr.appendChild(th); } table.appendChild(tr); var tr, row; var filtered = filterPresidents(jsonResponse["presidents"].president); for (var r = 0; r < filtered.length; r++) { tr = document.createElement('tr'); row = filtered[r]; for (var i = 0; i < properties.length; i++) { var td = document.createElement('td'); td.appendChild(document.createTextNode(row[properties[i]])); tr.appendChild(td); } table.appendChild(tr); } document.getElementById('presidentialTable').appendChild(table); } }; xhttp.open("GET", "//schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true); xhttp.send(); } loadPresidents(); function clearTable() { document.getElementById("presidentialTable").innerHTML = ""; } 

 body { font-family: 'Open Sans', sans-serif; padding: 20px 12px 10px 20px; } label { display: block; margin: 15px 0px 0px 0px; font-weight: 600; color: #1C2238; } label > span{ width: 100px; font-weight: bold; float: left; padding-top: 8px; padding-right: 5px; } input { box-sizing: border-box; border: 1px solid #C2C2C2; box-shadow: 1px 1px 4px #EBEBEB; border-radius: 3px; padding: 7px; outline: none; margin: 10px 0; width: 20%; } input:focus{ border: 1px solid #0C0; } button { border: none; padding: 8px 15px 8px 15px; background: #88EF5E; color: #1C2238; box-shadow: 1px 1px 4px #DADADA; border-radius: 3px; margin: 15px 0; font-size: 1em; } button:hover{ background: #EA7B00; color: #fff; } table { border-collapse: collapse; } td { padding: .5em; } 

 <form> <label for="name">Name:</label> <input id='input' placeholder="President Name" type="text"> <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button" onclick="clearTable()">Clear</button> <div id="presidentialTable"></div> </form> 

Answer 2

Your issue is fiexed by replacing the div clearing logic

if (document.getElementById('presidentialTable').innerHTML !== "") {
  document.getElementById("presidentialTable").innerHTML = "";
} else {
 document.getElementById('presidentialTable').appendChild(table);
}

Replaced like these

document.getElementById("presidentialTable").innerHTML = ""; 
document.getElementById('presidentialTable').appendChild(table);

the issue fixed fiddle is attached please go through it

searching issue fixed

Answer 3

Check this Below code... ans this is the FIDDLE

 loadPresidents = function() { "use strict"; var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { var data = this.responseText, jsonResponse = JSON.parse(data), table = document.createElement('table'); table.setAttribute('class', 'history'); var properties = ['number', 'name', 'date', 'took_office', 'left_office']; var capitalize = function(s) { return s.charAt(0).toUpperCase() + s.slice(1); }; function filterPresidents(data) { var input = document.getElementById('input').value; return data.filter(function(historicalData) { return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1; }); } var tr = document.createElement('tr'); for (var i = 0; i < properties.length; i++) { var th = document.createElement('th'); th.appendChild(document.createTextNode(capitalize(properties[i]))); tr.appendChild(th); } table.appendChild(tr); var tr, row; var filtered = filterPresidents(jsonResponse["presidents"].president); for (var r = 0; r < filtered.length; r++) { tr = document.createElement('tr'); row = filtered[r]; for (var i = 0; i < properties.length; i++) { var td = document.createElement('td'); td.appendChild(document.createTextNode(row[properties[i]])); tr.appendChild(td); } table.appendChild(tr); } document.getElementById("presidentialTable").innerHTML = ""; document.getElementById('presidentialTable').appendChild(table); } }; xhttp.open("GET", "//schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true); xhttp.send(); } loadPresidents(); 

 body { font-family: 'Open Sans', sans-serif; } label { display: block; margin: 15px 0px 0px 0px; font-weight: 600; color: #1C2238; } label > span{ width: 100px; font-weight: bold; float: left; padding-top: 8px; padding-right: 5px; } input { box-sizing: border-box; border: 1px solid #C2C2C2; box-shadow: 1px 1px 4px #EBEBEB; border-radius: 3px; padding: 7px; outline: none; margin: 10px 0; } input:focus{ border: 1px solid #0C0; } button { border: none; padding: 8px 10px 8px 10px; background: #88EF5E; color: #1C2238; box-shadow: 1px 1px 4px #DADADA; border-radius: 3px; margin: 10px 0; font-size: 1em; cursor:pointer; transition:0.2s all linear; } button:hover{ background: #EA7B00; color: #fff; } table{ width: 100%; } table,td,th { border-collapse: collapse; border:1px solid #999; } th{ padding:10px 25px; } td { padding: .2em; } #demo{ text-align:center; } 

 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="custom.js"></script> </head> <body> <form> <label for="name">Name:</label> <input id='input' placeholder="President Name" type="text"> <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button onclick="loadPresidents()" type="reset">Clear</button> <div id="presidentialTable"></div> <div id="demo">No Results found</div> </form> </body> </html>