Question

I am a complete newbie at Javasript and would like to work out how to access specific elements. I have over 20 song spans with content. If I already have the span ID for example “song 3” within a variable in the script, how do I access the “producedBy” class relating to that song, more specifically, the text held inside it which in this case says “whatever the weather”. Without changing the underlaying HTML?

Any help is very much appreciated to aid understanding of javascript. Thanks.

    <div class="Artist Song">
    <span id="song_1" class="song">   
       <span class="artistname">MJ</span>
        <span class="songname">Billie Jean</span>
        <span class="email" style="whatever"><strong>[e-mail]</strong></span>
        <span class="recordlabel">def jam</span>
        <span class="age">34 years</span>
        <span class="album">Album:<strong>Bad</strong></span>
        <span class="dateReleased" style="display:none">whatever</span>
        <span class="producedBy" style="display:none">Produced by Quincy jones</span>
    </span>
</div>

<div class="Artist Song">
    <span id="song_2" class="song">   
       <span class="artistname">Prodigy</span>
        <span class="songname">Firestarter</span>
        <span class="email" style="whatever"><strong>[e-mail]</strong></span>
        <span class="recordlabel">whatever</span>
        <span class="age">whatever</span>
        <span class="album">Album:<strong>Fat of the land</strong></span>
        <span class="dateReleased" style="display:none">whatever</span>
        <span class="producedBy" style="display:none">whatever</span>
    </span>
</div>

<div class="Artist Song">
    <span id="song_3" class="song">   
       <span class="artistname">Whoever</span>
        <span class="songname">Whatever</span>
        <span class="email" style="whatever"><strong>[e-mail]</strong></span>
        <span class="recordlabel">whatever</span>
        <span class="age">whatever</span>
        <span class="album">Album:<strong>Whatever</strong></span>
        <span class="dateReleased" style="display:none">whatever</span>
        <span class="producedBy" style="display:none">whatever the weather</span>
    </span>
</div>

<div class="Artist Song">
    <span id="song_4" class="song">   
       <span class="artistname">Whoever</span>
        <span class="songname">Whatever</span>
        <span class="email" style="whatever"><strong>[e-mail]</strong></span>
        <span class="recordlabel">whatever</span>
        <span class="age">whatever</span>
        <span class="album">Album:<strong>Whatever</strong></span>
        <span class="dateReleased" style="display:none">whatever</span>
        <span class="producedBy" style="display:none">whatever</span>
    </span>
</div>

...

Answer 1

document.getElementById("song_1").getElementsByClassName("producedBy")[0]