uncaught referenceerror inside conditional statement

Question

I'm trying to highlight video captions while the video plays. The captionTime variable comes up with an Uncaught ReferenceError: captionTime is not defined at :1:1 inside the conditional statement. If I take the console.log outside the conditional statement it works fine. Is it because of function scope?

const video = document.getElementById('video');
const caption = document.getElementsByTagName('span');

video.addEventListener('timeupdate', () => {
    for (i = 0; i < caption.length; i += 1) {
            let captionTime = caption[i].getAttribute('data-time');
       if (captionTime === video.currentTime) {
          caption.style.backgroundColor = 'yellow';
          console.log(captionTime);
       }
    }
});

<video id="video" width="400" height="225">
    <source type="video/mp4" src="video/video.mp4">
    <source type="video/ogg" src="video/video.ogg">
  </video>
</div>
<div class="transcript-wrapper">

  <p>
    <span data-time = "0.240"> 
    Now that we've looked at the architecture
    of the internet, let's see how you might</span>

    <span data-time ="4.130">
    connect your personal devices to
    the internet inside your house.</span>

    <span data-time="7.535">
    Well there are many ways to
    connect to the internet, and

    <span data-time="11.270">
    most often people connect wirelessly.</span>
  </p>
  <p>
    <span data-time="13.960">
    Let's look at an example of how
    you can connect to the internet.</span>

    <span data-time="17.940">
    If you live in a city or a town,
    you probably have a coaxial cable for</span>

    <span data-time="22.370">
    cable Internet, or a phone line if you
    have DSL, running to the outside of</span>

    <span data-time="26.880">
    your house, that connects you to
    the Internet Service Provider, or ISP.</span>

    <span data-time="32.100">
    If you live far out in the country,
    you'll more likely have</span>

    <span data-time="34.730">
    a dish outside your house, connecting
    you wirelessly to your closest ISP, or</span>

    <span data-time="39.430">
    you might also use the telephone system.</span>
  </p>
  <p>
    <span data-time="42.350">
    Whether a wire comes straight from
    the ISP hookup outside your house, or</span>

    <span data-time="46.300">
    it travels over radio
    waves from your roof,</span>

    <span data-time="49.270">
    the first stop a wire will make once
    inside your house, is at your modem.</span>

    <span data-time="53.760">
    A modem is what connects the internet
    to your network at home.</span>

    <span data-time="57.780">
    A few common residential modems are DSL or</span>
  </p>
</div>
<script src="jquery-3.2.1.min"></script>
<script src="mediaelementplayer/mediaelement-and-player.min.js"></script>
<script src="main.js"></script>

score 0 · Accepted Answer · answered Sep 08 '17 at 08:22

0

It's because of let scoping rules.

From the JS MDN:

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

You can read more about this in this SO question:

What's the difference between using “let” and “var” to declare a variable?

answered Sep 08 '17 at 08:22

Adelin

7,809
5
37
65

Surely the let in the question should be available within the conditional since it's not being reset within the conditional statement? – JackDev Sep 08 '17 at 08:30
Since it is declared inside the function and the conditional is inside the function it's accessible. That's what I thought anyway. – Chris Carr Sep 08 '17 at 09:43
I've used var instead but I am still getting the same error. – Chris Carr Sep 08 '17 at 09:53

uncaught referenceerror inside conditional statement

1 Answers1