Why does such a code work and such a nope?

  • 0 
    <!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>

    not working on top

    working bottom 
    <!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>
    JavaScript Emmett Copeland, Mar 22, 2019
    • 2 Answers
  • 0
    in working code, the semaphore correctly resolves situations.

    Where it doesn't work.



    You've hung up two handlers.

    Handler 1 does its job. Sets the semaphore to true.

    Handler 2, which was called immediately after the first one. He sees the truth and does his job too.



    As a result, both work, but there is no visible effect
    Anonymous
  • 0
    Because this is a for loop and in the above code it repeats the same steps. Therefore, the image does not change back. Try to substitute alert'y in if'y and you will understand what I mean.
    Anonymous
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!
↑
↓