I'm trying to set up a search bar that searches a table made by looping data brought from an API either by name or by email , but I can't find were I'm going wrong. The console shows me uncaught ReferenceError: sBar is not defined at window.onload Please try to keep in mind that I'm quite a newbie in JS. I'm really sorry is this is silly but I've tried my best and I'm extremely frustrated at my inability to see the mistake
This is my HTML
<body>
<div>
<label for="finder">Find User:</label>
<input type="search" id="searchInput" name="sInput" placeholder="Search
user">
<button id="sButton">Search</button>
</div>
<table class="table table-responsive">
<thead class="thead-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Email</th>
<th scope="col">Address</th>
<th scope="col">Phone</th>
<th scope="col">Website</th>
<th scope="col">Company</th>
</tr>
</thead>
<tbody name="tTable">
</tbody>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="script.js">
</script>
Mi JS
window.onload = function(){
let uList = document.querySelector('[name =tTable]');
fetchCall('https://jsonplaceholder.typicode.com/users', getUsers);
sButton.addEventListener('click',
fetchCall('https://jsonplaceholder.typicode.com/users', sBar), false);
function sBar(getObject) {
let sUser = getObject;
let inputBar = document.getElementById("searchInput");
let text = inputBar.textContent;
let textView = text.toUpperCase();
for (let i = 0; i < getObject.length; i++) {
let uObject = sUser[i];
if (textView == uObject.name || textView == uObject.email) {
let new_tTable = document.createElement('tbody');
uList.parentNode.replaceChild(new_tTable, uList)
let row = uList.insertRow();
let idInput = document.createElement('td');
let nameInput = document.createElement('td');
let usernameInput = document.createElement('td');
let emailInput = document.createElement('td');
let cityInput = document.createElement('td');
let phoneInput = document.createElement('td');
let websiteInput = document.createElement('td');
let companyInput = document.createElement('td');
idInput.textContent = uObject.id;
nameInput.textContent = uObject.name;
usernameInput.textContent = uObject.username;
emailInput.textContent = uObject.email;
cityInput.textContent = uObject.address.city;
phoneInput.textContent = uObject.phone;
websiteInput.textContent = uObject.website;
companyInput.textContent = uObject.company.name;
row.appendChild(idInput);
row.appendChild(nameInput);
row.appendChild(usernameInput);
row.appendChild(emailInput);
row.appendChild(cityInput);
row.appendChild(phoneInput);
row.appendChild(websiteInput);
row.appendChild(companyInput);
} else {
alert("User not found");
}
}
}
function fetchCall(url, fn){
fetch(url)
.then(function(response){
return response.json();
})
.then(function(endPoint){
fn(endPoint);
})
.catch(function(error){
console.error(error);
})
}
function getUsers(getObject) {
let user = getObject;
for (let i = 0; i < getObject.length; i++) {
let userObject = user[i];
let row = uList.insertRow();
let idInput = document.createElement('td');
let nameInput = document.createElement('td');
let usernameInput = document.createElement('td');
let emailInput = document.createElement('td');
let cityInput = document.createElement('td');
let phoneInput = document.createElement('td');
let websiteInput = document.createElement('td');
let companyInput = document.createElement('td');
idInput.textContent = userObject.id;
nameInput.textContent = userObject.name;
usernameInput.textContent = userObject.username;
emailInput.textContent = userObject.email;
cityInput.textContent = userObject.address.city;
phoneInput.textContent = userObject.phone;
websiteInput.textContent = userObject.website;
companyInput.textContent = userObject.company.name;
row.appendChild(idInput);
row.appendChild(nameInput);
row.appendChild(usernameInput);
row.appendChild(emailInput);
row.appendChild(cityInput);
row.appendChild(phoneInput);
row.appendChild(websiteInput);
row.appendChild(companyInput);
}
}
}
When you set an event, you call the function, but you need to bind it.
sButton.addEventListener('click', fetchCall.bind(this, 'https://jsonplaceholder.typicode.com/users', sBar), false);
I also recommend to make a function in the global scope.
uList = document.querySelector('[name =tTable]');
window.onload = function () {
fetchCall('https://jsonplaceholder.typicode.com/users', getUsers);
sButton.addEventListener('click', fetchCall.bind(this, 'https://jsonplaceholder.typicode.com/users', sBar), false);
}
function sBar(getObject) {
let sUser = getObject;
let inputBar = document.getElementById("searchInput");
let text = inputBar.textContent;
let textView = text.toUpperCase();
for (let i = 0; i < getObject.length; i++) {
let uObject = sUser[i];
if (textView == uObject.name || textView ==
uObject.email) {
let new_tTable = document.createElement('tbody');
uList.parentNode.replaceChild(new_tTable, uList)
let row = uList.insertRow();
let idInput = document.createElement('td');
let nameInput = document.createElement('td');
let usernameInput = document.createElement('td');
let emailInput = document.createElement('td');
let cityInput = document.createElement('td');
let phoneInput = document.createElement('td');
let websiteInput = document.createElement('td');
let companyInput = document.createElement('td');
idInput.textContent = uObject.id;
nameInput.textContent = uObject.name;
usernameInput.textContent = uObject.username;
emailInput.textContent = uObject.email;
cityInput.textContent = uObject.address.city;
phoneInput.textContent = uObject.phone;
websiteInput.textContent = uObject.website;
companyInput.textContent = uObject.company.name;
row.appendChild(idInput);
row.appendChild(nameInput);
row.appendChild(usernameInput);
row.appendChild(emailInput);
row.appendChild(cityInput);
row.appendChild(phoneInput);
row.appendChild(websiteInput);
row.appendChild(companyInput);
} else {
alert("User not found");
}
}
}
function fetchCall(url, fn) {
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (endPoint) {
fn(endPoint);
})
.catch(function (error) {
console.error(error);
})
}
function getUsers(getObject) {
let user = getObject;
for (let i = 0; i < getObject.length; i++) {
let userObject = user[i];
let row = uList.insertRow();
let idInput = document.createElement('td');
let nameInput = document.createElement('td');
let usernameInput = document.createElement('td');
let emailInput = document.createElement('td');
let cityInput = document.createElement('td');
let phoneInput = document.createElement('td');
let websiteInput = document.createElement('td');
let companyInput = document.createElement('td');
idInput.textContent = userObject.id;
nameInput.textContent = userObject.name;
usernameInput.textContent = userObject.username;
emailInput.textContent = userObject.email;
cityInput.textContent = userObject.address.city;
phoneInput.textContent = userObject.phone;
websiteInput.textContent = userObject.website;
companyInput.textContent = userObject.company.name;
row.appendChild(idInput);
row.appendChild(nameInput);
row.appendChild(usernameInput);
row.appendChild(emailInput);
row.appendChild(cityInput);
row.appendChild(phoneInput);
row.appendChild(websiteInput);
row.appendChild(companyInput);
}
}