0

私はこのコードを書きました：

<html>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <script>
        var btn = document.getElementsByTagName("button");
        for(var i = 0; i<5; i++){
          btn[i].onclick = function(){alert(i)}
        }
      
    </script>
</html>

クリックするたびに、最後のi値を参照する同じ結果が得られます

それから私はそれをclousreでラップしようとしました、そしてそれはうまくいきました:

<html>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <script>
        var btn = document.getElementsByTagName("button");
        for(var i = 0; i<5; i++){
          btn[i].onclick = createAlert(i)
        }
        
        function createAlert(i){
            return function(){
                alert(i)
            }
        }

    </script>
</html>

舞台裏で何が起こっているのか、なぜそれが正常に機能しているのかを説明してもらえますか?

4

0 に答える 0