CODEWITHSUNDEEP
javascriptdomhtml
robin00212
robin00212

Reputation: 91

Hide and show spans with a specific class

I'm i'm trying to display songs made by an artist when i click the artist's name.
Here's my HTML

<div id="artists">
<span class="artist" id="Eminem" onclick="showSongs("Eminem")">Eminem</span>
</div>

<div id="songs">
<span style="display:none;" class="Eminem" id="Eminem - Survival" onclick="playSong('Eminem - Survival');">Survival</span>
</div>

And here is my Javascript

function showSongs(artist) {
document.getElementsByClassName(artist).styles.display="inline";
}

This is not all my code, I have more artists and more songs.
but the point is that i want the songs from an artist to display when i click the artists name

I have googled it for a while now, All i found was that i had to display span tags as inline.

If you need more information just ask and i'll edit the post

Upvotes: 0

Views: 3100

Answers (4)

Goose
Goose

Reputation: 3279

First, adjust the artist name you are sending to use single quotes, you are breaking the string by using double quotes.

<span class="artist" id="Eminem" onclick="showSongs('Eminem')">Eminem</span>

Then when you get elements by class name you are retrieving a collection and need to loop through them. Shown below: 

function showSongs(artist) {
  var elements = document.getElementsByClassName(artist);
  for(var i = 0; i < elements.length; i++) {
      elements[i].style.display="inline";
  }
}

Here is a jsFiddle.

Upvotes: 2

gfrobenius
gfrobenius

Reputation: 4067

Here you go: http://jsfiddle.net/LVRGZ/3/

<div id="artists">
    <span class="artist" onclick="showSongs('Eminem')">Eminem</span>
</div>

<div id="Eminem" style="display:none;">
    <span id="Eminem - Survival" onclick="playSong('Eminem - Survival');">Survival</span><br/>
    <span id="Another Song" onclick="playSong('Eminem - 2');">Another Song</span><br/>
    <span id="A Third Song" onclick="playSong('Eminem - 3');">A Third Song</span><br/>
</div>

<script>
showSongs=function(id) {
    alert("Showing "+id);
    document.getElementById(id).style.display='';
}
</script>

Upvotes: 0

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60517

EDIT: Ah yes, see the other answers for the other half of the problem.

This code should work, the only thing I see wrong with it is this line:

<span class="artist" id="Eminem" onclick="showSongs("Eminem")">Eminem</span>

You should use single quotes inside the showSongs call:

<span class="artist" id="Eminem" onclick="showSongs('Eminem')">Eminem</span>

If that does not solve the problem, it is probably caused by some other code on the page.

Upvotes: 1

Jonathan Fleury
Jonathan Fleury

Reputation: 41

getElementsByClassName returns an array-like collection. I don't think you can change the style this way.. Maybe you could try this :

function showSongs(artist) {
    var artists = document.getElementsByClassName(artist);
    for(var i = 0; i < artists.length; i++) {
        artists[i].style.display="inline";
    }
}

Would be a lot easier with jquery.

Upvotes: 0

Related Questions