При клике ошибка Cannot read property 'style' of undefined

Question

let x = document.querySelectorAll(".square")

for(i=0;i<x.length;i++){
    x[i].onclick = function(){
        x[i].style.backgroundColor = "blue"
    }
}

.square{
    width: 100px;
    height: 100px;
    background-color: red;
  margin:10px;
}

        <div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>

Answer 1

а так?

let x = document.querySelectorAll(".square")

for(let i=0;i<x.length;i++){
    x[i].onclick = function(){
        x[i].style.backgroundColor = "blue"
    }
}

.square{
    width: 100px;
    height: 100px;
    background-color: red;
  margin:10px;
}

<div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>

против

let x = document.querySelectorAll(".square")

for(var i=0;i<x.length;i++){
    x[i].onclick = function(){
        x[i].style.backgroundColor = "blue"
    }
}

.square{
    width: 100px;
    height: 100px;
    background-color: red;
  margin:10px;
}

<div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>

и ещё пример

let x = document.querySelectorAll(".square")

for(let i=0;i<x.length;i++){
    x[i].onclick = function(){
        x[i].style.backgroundColor = "blue"
    }
}

console.log(window.i)

.square{
    width: 100px;
    height: 100px;
    background-color: red;
  margin:10px;
}

<div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>

против

let x = document.querySelectorAll(".square")

for(i=0;i<x.length;i++){
    x[i].onclick = function(){
        x[i].style.backgroundColor = "blue"
    }
}

console.log(window.i)

.square{
    width: 100px;
    height: 100px;
    background-color: red;
  margin:10px;
}

<div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>

БЛОГ НА HUSL

При клике ошибка Cannot read property 'style' of undefined

Ответы (1 шт):