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

Question

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";

Where exactly is that line in your code? In the for..i loop? Or in the forEach loop? — Teemu
– Teemu, Commented Sep 27, 2017 at 18:23
I put it back in where it was, now commented out, in the for...i loop. — topplethepat
– topplethepat, Commented Sep 27, 2017 at 18:34
Like your line element.innerText = syncData[i].text + " "; you can add the class pulled from syncData[i].class but test first to see if there is one. if (syncData[i].class) { element.classList.add(syncData[i].class); } This if tests for any truthy value for class -- defined, non-null, not empty. — Stephen P
– Stephen P, Commented Sep 27, 2017 at 18:43
Thanks, this is adding the correct class into the DOM.I can't figure out why it isn't changing its color though.To experiment, I added another class to the other words called "reg", and then I modified the forEach loop thusly: if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end ) subtitles.children[index].getElementsByClassName("reg")[i].style.backgroundColor = "red"; and then another one with else if for the "alert" class making that yellow. It doesn't throw errors but doesn't highlight. — topplethepat
– topplethepat, Commented Sep 27, 2017 at 20:30
Your new problem sounds like it's probably something to do with your CSS–it could be from a simple typo. In any case, that is a new issue and should be a new question. — Stephen P
– Stephen P, Commented Sep 27, 2017 at 21:07

CoursesWeb · Accepted Answer · 2017-09-27 18:38:25Z

2

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);
}

answered Sep 27, 2017 at 18:38

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

topplethepat Over a year ago

This works! Thanks. Now, the issue is that the styles still don't change, although the DOM has correct classes.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related