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!