New to JavaScript

JavaScript
1

Hey Guys, Need your help!

I am trying to make a program in JavaScript. which receive a name of an artist as an input and displays their record on the page.

I am doing something terrible wrong. Can someome please help me out here?

var record = [
	{
		"singer": "Blake Shelton",
		"album": "Home",
		"released_year": 2008,
		"no_of_songs": 2
	},
	{
		"singer": "Enrique Iglesias",
		"album": "Escape",
		"released_year": 2001,
		"no_of_songs": 4
	},
	{
		"singer": "Adam Levine",
		"album": "Sugar",
		"released_year": 2015,
		"no_of_songs": 3
	},
	{
		"singer": "Lorde",
		"album": "Team",
		"released_year": 2013,
		"no_of_songs": 2
	}

];

var artist = document.querySelector("input").value;

function findArtist(){
	for (var i = 0; i < record.length; i++){
		if (record[i].singer === artist){
			return record[i];    
		}
    	else {
    		return "No record found.";
    	}
	}
};

var message = findArtist();

function sayHello (){
	document.getElementById("content").textContent = message;
// content is a blank element to display the content on web page.
}

	document.getElementById("button")
				.onclick = sayHello;
2

Hi,

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.

2 Likes
3

Hi,

Do you mean like this?


function sayHello (){
	var message = findArtist();
	document.getElementById("content").textContent = message;
}

	document.getElementById("button")
				.onclick = sayHello;

Thank you.

4

Exactly :wink:

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.";
    	}
	}
};
1 Like
5

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

1 Like
6

Thank you. Thank you. Thank you. You guys are awesome.

@Airthee that worked like a charm.

@ILM you were right. I removed the else statement and brought down the return "No record found. outside the “for” loop.

Thank you so much. This community is amazing. :blush:

1 Like
7

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())

Hope this helps :slight_smile:

1 Like
8

Thanks mate. I have done that already. :slight_smile:

9

Hey Mate! since you answered, let me know if you have any idea on converting the output into a table, for a better looking display on the webpage.

Thank you :slight_smile:

10

Unfortunately I have no idea. Still learning.