Error encountered: Unable to access attributes of an object that is not defined (specifically trying to read 'clientX')

Hey there! I'm having some trouble moving figures while moving the cursor. It's strange because I've done the same thing on another page and it worked perfectly:

const scaleFactor = 1 / 20;


function moveItems(event) {
    const shapes = document.querySelectorAll(".shape")

    const x = event.clientX * scaleFactor;
    const y = event.clientY * scaleFactor;

    for (let i = 0; i < shapes.length; ++i) {
        const isOdd= i % 2 !== 0;
        const boolInt = isOdd ? -1: 1;

        shapes[i].style.transform = `translate(${x * boolInt}px, ${y * boolInt}px)`
    }

    console.log(shapes)
}

moveItems()

I've tried different approaches to fix it, but the issue persists

Answer №1

When you call movebackground() without any parameters, it is essentially the same as calling movebackground( undefined ). This is why you are seeing the error message.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with if statement when checking element.checked

Hey everyone, I'm currently working on a calculator app and running into an issue. I have set up 3 radio buttons and I would like to check them using an 'if statement' in my JS file. However, the problem is that the 'main' element ...

Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended: http://codepe ...

What is the best approach to structure a React project in which a component's rendering changes with each instance?

I am facing a challenge with rendering a component that relies on multiple AJAX calls to complete. These AJAX responses return different data each time, and I want to implement a button that will trigger the re-rendering of this random component every time ...

Switch between dropdowns with jQuery

Issue at Hand: In the scenario illustrated below, there is a side navigation bar containing options that reveal a toggled section upon clicking. Specifically, if you select the third item labeled "Dolar" from the menu, a dropdown with three additional cho ...

Ways to delete a document from Mongodb depends on the existence of a more recent document

Is there a way to automatically delete previous database insertions in my meteor web app whenever a new document is inserted? I've attempted the following code, but it hasn't been successful: if(SearchLobby.find({profile: Meteor.userId()}).count ...

Trigger an event in Javascript/ASP.net following a dropdownlist selection

On a single HTML page, I have incorporated three dropdown lists for country, city, and district with an initial blank selected value, along with a Google map. The aim is to automatically center and zoom in on the map whenever users make selections from the ...

Unable to process the post request

I've encountered an issue while attempting to redirect using the res.redirect() function. When I submit the form, it should insert the data into the database and then redirect me to the home root. However, instead of successfully redirecting, I'm ...

Show the ajax response on a separate page

I am looking to showcase the output of an ajax request on a separate page rather than the page where the ajax call originated. The scenario is that I have a membership directory page, and when a user clicks on a member ID cell, an ajax call sends the ID to ...

Creating the data type for the input file's state: React with Typescript

Encountering an error when attempting to define the type of a file object within state: Argument of type 'null' is not assignable to parameter of type 'File | (()=> File)'.ts. Currently working on an upload component that allows for ...

Ending Current Tab using angularJS Controller

Is there a way to automatically close the current browser tab after a successful action in AngularJS? ...

Easily modify and manage state on-the-fly using TextFields

Is the title conveying my intentions clearly? If not, please let me know. Essentially, I am looking to create a component that generates a form based on a JSON file. For example, if someone clicks on "light" in the navbar, I want the form to display fields ...

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

Angular application featuring scrolling buttons

[Apologies for any language errors] I need to create a scrollable view with scroll buttons, similar to the image below: Specifications: If the list overflows, display right/left buttons. Hide the scroll buttons if there is no overflow. Disable the le ...

Utilize the 'Save and add another' feature within a bootstrap modal

Hello everyone, this is my first time seeking assistance on this platform. If any additional information is required, please do not hesitate to ask. Currently, I am working with JavaScript in combination with the handlebars framework. Within a bootstrap ...

Develop a diverse range of form types within Django forms

Even though I know how to create a form set based on a given form type, it doesn't completely resolve the issue at hand. Imagine having a fast food portal where users can add items and depending on their selection, additional fields need to be dynami ...

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

What steps can be taken to revert this Node.js module to a particular version and ensure it does not automatically update in

While using the Nodemailer module in node.js, I encountered a specific error that read as follows; [Error: Unsupported configuration, downgrade Nodemailer to v0.7.1 or see the migration guide https://github.com/andris9/Nodemailer#migration-guide] A ...

Difficulty with implementing authentication middleware based on a condition in Express using Node.js

Currently in the process of developing my website, which includes utilizing an API built with node.js, express, and MongoDb for the database. I am facing a challenge with creating a middleware to ensure that the USER ID matches the POSTED BY ID in a COMME ...

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...