I will try to make it as clear as possible. But right now I have a table displayed when called in HTML. However, when someone enters the name of the president, I want the fully listed table to disappear and display the results that were filtered out after the person clicks the “Search for Presidents” button. I tried the conditional if else statement, but it clears the table (making it empty), and then I have to make another click, which then displays the filtered results. Is there a way to prevent double-clicking?
JSfiddle to view https://jsfiddle.net/rtomino/7Lod1szp/1/
The conditional that I had, but it forces me to double-click.
if (document.getElementById('presidentialTable').innerHTML !== "") {
document.getElementById("presidentialTable").innerHTML = "";
} else {
document.getElementById('presidentialTable').appendChild(table);
}
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>
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 = "";
}