You need to call the findArtist() function inside the sayHello() function.
Actually, you get the message at the script load, so it is never updated.
You want to get the message when the user click on the button so just move it inside findArtist function.
And your var artist = document.querySelector("input").value; has to be inside your sayHello function too.
And I think you should pass a artist variable to your findArtist function.
This would give something like this :
function sayHello (){
var artist = document.querySelector("input").value;
var message = findArtist(artist);
document.getElementById("content").textContent = message;
}
So your findArtist will look like :
function findArtist(artist){
for (var i = 0; i < record.length; i++){
if (record[i].singer === artist){
return record[i];
}
else {
return "No record found.";
}
}
};
you also need to check your logic here.
so, the first iteration,i has value of 0.
it is not the right object, so the if statement condition is false, and that block of code doesn’t execute. but if the if condition is false, then the else execute…
so No record found. is returned and the function stops and doesn’t check anything else
I am new to JS but I think this would be a great thing to add to your code. I would set both strings being compared to lower case using the .toLowerCase() function so that if the user searching for an artist types “blake shelton” or “bLaKe ShElToN” it will still find the match.
For Example:
if (record[i].singer.toLowerCase() === artist.toLowerCase())