CODEWITHSUNDEEP
javascript
topplethepat
topplethepat

Reputation: 531

trying to setAttribute to one item in an array with js, but DOM changes all

I have this array:

    var syncData = [
              {"end": "1.130","start": "0.849","text": "I'm" },
              {"end": "1.390","start": "1.140","text": "seeing" ,"class": "alert"},
              {"end": "4.009","start": "3.449","text": "something" }]

and I'm adding that class in "seeing" because I want to change that word's style in the transcript, synced up with the audio (see start and end times in seconds as the other fields in the array). That is, when "seeing" is spoken, I want the background to be highlighted.

I tried adding

    element.setAttribute("class", "alert");

but when I did that I saw in the DOM that everything had that class attributed to it. Here is the complete code, which currently highlights all the words, things I tried commented out:

    ( function(win, doc) {
        var audioPlayer = doc.getElementById("audiofile");
        var subtitles = doc.getElementById("subtitles");
        var syncData = [
             {"end": "1.130","start": "0.849","text": "I'm" },
              {"end": "1.390","start": "1.140","text": "seeing" ,"class": "alert"},
               {"end": "4.009","start": "3.449","text": "something" }

            ];
        createSubtitle();

        function createSubtitle()
        {
            var element;
            for (var i = 0; i < syncData.length; i++) {
                element = doc.createElement('span');
                element.setAttribute("id", "c_" + i);
                //element.setAttribute("class", "alert");
                element.innerText = syncData[i].text + " ";
                subtitles.appendChild(element);

            }

        audioPlayer.addEventListener("timeupdate", function(e){
            syncData.forEach(function(element, index, array){

                 if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                    subtitles.children[index].style.background = 'yellow';
                // var x = subtitles.children[index].getElementsByClassName("alert");
                // var j;
                // for (j = 0; j < x.length; j++) {
                // if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                //     x[j].style.backgroundColor = 'yellow';
                // else if (audioPlayer.currentTime > element.start && audioPlayer.currentTime > element.end )
                //     x[j].style.backgroundColor = 'DarkGrey'; }
                //if (audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                    //subtitles.children[index].getElementsByClassName("alert").style.background = "yellow";

Upvotes: 0

Views: 104

Answers (1)

CoursesWeb
CoursesWeb

Reputation: 4237

Try this:

for (var i = 0; i < syncData.length; i++) {
  element = doc.createElement('span');
  element.setAttribute("id", "c_" + i);
  if(syncData[i].class) element.setAttribute("class", syncData[i].class); // see this line
  element.innerText = syncData[i].text + " ";
  subtitles.appendChild(element);
}

Upvotes: 2

Related Questions