ramil_bayramov
@ramil_bayramov
Beginner programmer of HTML,CSS,JS

Почему такой код работает а такой неа?

<!DOCTYPE html>
<html>
<head lang="ru">
    <title>js</title>
    <link rel="stylesheet" href="style.css">
    <script>
        window.onload = function () {
            let clck = false;
            for (let i = 0; i < document.images.length; ++i) {
                document.images[i].addEventListener('mousedown', function (e) {
                    if (clck == false) {
                        document.images[i].style.transition = 1 + 's';
                        document.images[i].style.width = 400 + 'px';
                        clck = true;
                    }
                })
                document.images[i].addEventListener('mousedown', function (e) {
                    if (clck == true) {
                        document.images[i].style.transition = 1 + 's';
                        document.images[i].style.width = 400 + 'px';
                        clck = false;
                    }
                })
                }
            }
    </script>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>
<body id="body">
    <img src="C:/Users/sds63/Pictures/for loop.png" alt="">
    <img src="C:/Users/sds63/Pictures/addEventListener.jpg" alt="">
    <img src="C:/Users/sds63/Pictures/MakeToDoListFromThisIMG.png" alt="">
</body>
</html>

сверху нерабочий

снизу рабочий
<!DOCTYPE html>
<html>
<head lang="ru">
    <title>js</title>
    <link rel="stylesheet" href="style.css">
    <script>
        window.onload = function () {
            let clck = false;
            for (let i = 0; i < document.images.length; ++i) {
                document.images[i].addEventListener('mousedown', function (e) {
                    if (clck == false) {
                        document.images[i].style.transition = 1 + 's';
                        document.images[i].style.width = 400 + 'px';
                        clck = true;
                    }
                    else {
                        document.images[i].style.transition = 1 + 's';
                        document.images[i].style.width = 100 + 'px';
                        clck = false;
                        }
                })
                }
            }
    </script>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>
<body id="body">
    <img src="C:/Users/sds63/Pictures/for loop.png" alt="">
    <img src="C:/Users/sds63/Pictures/addEventListener.jpg" alt="">
    <img src="C:/Users/sds63/Pictures/MakeToDoListFromThisIMG.png" alt="">
</body>
</html>
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 2
@402d
начинал с бейсика на УКНЦ в 1988
в работающем коде семафор правильно разруливает ситуации.
Там где не работает.

Вы повесили два обработчика.
Обработчик 1 делает свое дело. Ставит семафор в истину.
Обработчик 2, который вызвался сразу за первым. Видит истину и делает свое дело тоже.

В результате оба работают, но видимого эффекта нет
Ответ написан
ikoit
@ikoit
Веб–разработчик
Потому что это цикл for и в верхнем коде он повторяет одни и те же действия. Поэтому изображение обратно не изменяется. Попробуйте подставить alert'ы в if'ы и поймёте о чём я говорю.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы