キャッチされていない参照エラーの内部条件文

Question

ビデオの再生中にビデオキャプションを強調表示しようとしています。 captionTime変数には、Uncaught ReferenceErrorが表示されます。captionTimeは、条件文の中で at：1：1と定義されていません。私が条件文の外でconsole.logを取るとうまくいきます。機能範囲のためですか？

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> 

Answer 1

それは理由のletスコープルールです。 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 
} 

あなたはこのSO質問にこの詳細を読むことができます：それはされていないので、

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