Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by juliemaccluskey
juliemaccluskey
11,597 Points

Can't highlight video transcript as it goes

I am having trouble highlighting video transcript as it goes. Honestly, I have read other posts and copied the code from those answers, but still having trouble understanding this task and am still trying to get a grip on javascript overall. I'm getting an error in the console telling me that video.addEventListener is not a function. Don't know if that's the main issue or not. Any help would be appreciated!

HTML:

<div id="transcriptWrap">
    <p>
        <span id="1" class="line" data-end="4.13" data-start=".24">Now that we've looked at the architecture of the internet, let's see how you might
        </span>
        <span id="2" class="line" data-start="4.13" data-end="7.535">connect your personal devices to the internet inside your house.
        </span>
        <span id="3" class="line" data-start="7.535" data-end="11.27"> Well there are many ways to connect to the internet, and
        </span>
        <span id="4" class="line" data-start="11.27" data-end="13.96">
        most often people connect wirelessly.
        </span>

CSS:

.current {
    background-color: yellow;
}

JS:

var lines = document.getElementById("transcriptWrap").getElementsByTagName("span");
var video = document.getElementsByTagName("video");
var now = video.currentTime;

video.addEventListener("update", function() {
for (var i = 0; i < lines.length; i++) {

  var start = lines[i].getAttribute("data-start");
    var end = lines[i].getAttribute("data-end");  

      if (now >= start && now <= end) {
        lines[i].className = "current";
      } else {
        lines[i].className = "line";
      }
    }
});

1 Answer

Seth Kroger
Seth Kroger
56,416 Points

You're using getElement*s*ByTagName() returns a collection of elements, not a single element. If there is only one video in the page you should reference it as:

var video = document.getElementsByTagName("video")[0];

Also your now variable will only have the time when the script first started. If you want to access the current time when the handler executes, you should grab it inside the handler, not outside it.

juliemaccluskey
juliemaccluskey
11,597 Points

Perfect! Thank you so much. Works great now.