What is the most efficient way to use a for loop with JavaScript querySelectorAll to move multiple images?

Question

What is the most efficient way to use a for loop with JavaScript querySelectorAll to move multiple images?

I'm trying to move multiple images by defining each one with a for loop. Below is the code I have:

var elem = document.querySelectorAll(".yikama");
var el;
for (i = 0; i < elem.length; i++) {
    var el = elem[i]
    el.addEventListener("mousedown", start)
    
    function start() {
        addEventListener("mousemove", move)
    }

    function move(b) {
        b = b || event;
        el.style.left = b.pageX - 290 + "px";
        el.style.top = b.pageY - 190 + "px";
    }
    
    el.addEventListener("mouseup", function () {
        removeEventListener("mousemove", move);
    })   
}

However, I encountered an error: Uncaught TypeError: Cannot read property 'addEventListener' of undefined at line 1:141. How can I resolve this issue?

javascript

Answer 1

Answer №1

You've made a couple of errors in your code. Firstly, you need a condition in the for loop's second statement like i == elem.length or i === elem.length. The correct condition to use is i < elem.length. Also, be careful with this assignment (i = elem.length) as it will not work correctly and can lead to an infinite loop.

The second mistake is that you haven't assigned the move event to any element. Make sure to use el.addEventListener and el.removeEventListener within the start and mouseup events respectively.

Instead of using var el, switch to let el to avoid any potential closure issues. And remember to include b.preventDefault(); inside the move function.

Here is a revised version of your code:

var elem = document.querySelectorAll(".yikama");
for (let i = 0; i < elem.length; i++) {
    let el = elem[i];
    el.addEventListener("mousedown", start);
    
    function start() {
        el.addEventListener("mousemove", move);
    }

    function move(b) {
        b.preventDefault();
        b = b || event;
        el.style.left = b.pageX - 290 + "px";
        el.style.top = b.pageY - 190 + "px";
    }

    el.addEventListener("mouseup", function () {
        el.removeEventListener("mousemove", move);
    });
}

Answer 2

You've made a couple of errors in your code. Firstly, you need a condition in the for loop's second statement like i == elem.length or i === elem.length. The correct condition to use is i < elem.length. Also, be careful with this assignment (i = elem.length) as it will not work correctly and can lead to an infinite loop.

The second mistake is that you haven't assigned the move event to any element. Make sure to use el.addEventListener and el.removeEventListener within the start and mouseup events respectively.

Instead of using var el, switch to let el to avoid any potential closure issues. And remember to include b.preventDefault(); inside the move function.

Here is a revised version of your code:

var elem = document.querySelectorAll(".yikama");
for (let i = 0; i < elem.length; i++) {
    let el = elem[i];
    el.addEventListener("mousedown", start);
    
    function start() {
        el.addEventListener("mousemove", move);
    }

    function move(b) {
        b.preventDefault();
        b = b || event;
        el.style.left = b.pageX - 290 + "px";
        el.style.top = b.pageY - 190 + "px";
    }

    el.addEventListener("mouseup", function () {
        el.removeEventListener("mousemove", move);
    });
}

Answer 3

Answer №2

To move an image using style.left and style.top, it is necessary to apply a specific position to the image element.

Additionally, including preventDefault in the mousemove event is crucial to ensure that the mouseup event can be properly triggered following the mousemove event.

This precaution is essential because the browser itself handles dragging and dropping of native images; hence, using preventDefault helps avoid any default behavior interference.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .yikama{
        position: relative;
    }
</style>
<body>
    <img class="yikama"
        src="/xx/xx" alt="" />
</body>
<script>
    var elem = document.querySelectorAll(".yikama");
    var el;
    for (let i = 0; i < elem.length; i++) {
        var el = elem[i]
        el.addEventListener("mousedown", start)
        function start() {
            el.addEventListener("mousemove", move)
        }

        function move(b) {
            b.preventDefault()
            b = b;
            el.style.left = b.pageX - 290 + "px";
            el.style.top = b.pageY - 190 + "px";
        }
        el.addEventListener("mouseup", function () {
            el.removeEventListener("mousemove", move)
        })
    }
</script>

</html>

Answer 4

To move an image using style.left and style.top, it is necessary to apply a specific position to the image element.

Additionally, including preventDefault in the mousemove event is crucial to ensure that the mouseup event can be properly triggered following the mousemove event.

This precaution is essential because the browser itself handles dragging and dropping of native images; hence, using preventDefault helps avoid any default behavior interference.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .yikama{
        position: relative;
    }
</style>
<body>
    <img class="yikama"
        src="/xx/xx" alt="" />
</body>
<script>
    var elem = document.querySelectorAll(".yikama");
    var el;
    for (let i = 0; i < elem.length; i++) {
        var el = elem[i]
        el.addEventListener("mousedown", start)
        function start() {
            el.addEventListener("mousemove", move)
        }

        function move(b) {
            b.preventDefault()
            b = b;
            el.style.left = b.pageX - 290 + "px";
            el.style.top = b.pageY - 190 + "px";
        }
        el.addEventListener("mouseup", function () {
            el.removeEventListener("mousemove", move)
        })
    }
</script>

</html>

What is the most efficient way to use a for loop with JavaScript querySelectorAll to move multiple images?

Answer №1

Answer №2

Similar questions

Exploring the animation potential of HTML5 canvas and Javascript through utilizing putImageData with animated gifs

Tips on adding a tooltip to the react-bootstrap tab element

Parsing error: 'Unexpected token' found in JSON while attempting to access an external file

Retrieve a value using the jQuery each() method

Is it possible to extract only the time from a date and time using angular-moment library?

What is the best way to create an index for a user-provided value in a textbox

The animated loading image is taking an eternity to actually load

Maintain GoogleMaps map object across different views in AngularJS

Refresh the dataTable following the form submission within the colorbox

Encountering a fresh issue after updating to TS version 4.4.3 while accessing properties of the top "Object may be 'null'."

Utilizing the loop counter within an Array

Cross-origin resource sharing in Express.js servers

Reverse a filter within an ng-repeat loop - AngularJS

Can you explain the significance of this specific form of variable declaration?

Change the content of an ion-card in Ionic2 dynamically

Issues with TypeScript arise when transferring arguments between functions

Encountering a "403 Forbidden" error upon deployment to the server due to

Updating .babelrc to include the paths of JavaScript files for transpilation

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

Exploring the concept of template inheritance in Vue.js