Using the dollar sign in Mootools to call elements with variables

I am facing an issue with modifying an element using Fx.Tween, but the problem lies in the fact that the element id is dynamically generated. This means I need to piece together the id from various variables.

For example, in JavaScript:

name = 'foo';
id = '42';

If I want to access the element $('foo_42'), how should I write it out?

It seems like $(name+'_'+id) is not working for me. Am I doing something wrong?

Here is an example from my code:

var highlight = new Fx.Tween($(accountID+'_'+type+'_'+permission), {
    background-color: #f00;
});

Update: It appears there was no answer to this question - the issue was actually a mistake in my usage of the Fx.Tween function in the code sample. Thank you all for your input.

javascriptmootoolsdollar-sign

Answer №1

Yes, that's spot on. Mootools is not able to differentiate between $('foo_42') and $('foo' + '_' + '42'), it will only recognize foo_42. Ensure the ID you are referencing actually exists. If it doesn't, then $() will return null.

Answer №2

Have you experimented with

let highlightEffect = new Fx.Tween($(userID + '_' +category+ '_'+permission), {
    background: '#f00'
    //                ^^^^^^
});

? The initial code snippet you shared is not valid in Javascript. Remember that the object syntax used in JS is different from CSS.

The expression $(name+'_'+id) should function properly as long as name and id are defined within that context.

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

How can I automatically replace environment variables in a .json configuration file upon loading?

As someone who is relatively new to the world of JavaScript, I hope you can bear with me if my question is not quite articulated correctly. I've been tasked with working on a legacy project that relies on loading configuration files from .json files. ...

javascriptnode.jsjsonnpmdocker-compose

Verify the validation of the text box

Checking a textbox control for validation is necessary. Validation Criteria: Value should be between 0 and 1000, with up to 2 decimal places (e.g. 1.00, 85.23, 1000.00). Once 2 decimal points are used, users should not be able to enter additional ze ...

javascriptasp.netvalidation

Acquiring the Django administrator media files

I'm curious about how to include the JavaScript files from the Django Admin module for a custom view. Can anyone provide guidance on how to achieve this? I've checked the admin templates, but I'm uncertain of the most effective approach to ...

javascriptdjangodjango-admin

javascript while loop not functioning properly

Can someone assist me with troubleshooting this while loop issue? <script type="text/javascript"> var num = window.prompt("Please enter a score"); var sum, average; var count=0; while (num > 0) { sum += num; ...

javascriptwhile-loop

Switch the class between two elements using a link

Here is the HTML code I am working with: <a href="javascript:"> <img class="remove" src="images/remove.png" /> </a> <div class="content"> <h2>About</h2> <p>We are Sydney Wedding Photographers and have ...

javascriptjqueryhtmlcss

React component slider encountering issue of 'undefined property style reading'

I attempted to develop a component for a slider, but it seems to be malfunctioning. Upon the initial rendering, I encountered the error: 'cannot read property style of undefined...' When I logged x[slideIndex-1], initially it returns undefined ...

javascriptreactjs

Guide to setting a dynamic print style without affecting the screen media

In my report, there is a details section below. The screen provides instructions to view the details with a button that toggles the list's visibility. When printing the report, I only want the instructions to show if the list is visible. If the list ...

javascriptjquerycss

How to retrieve a value from a getter in a different file using Node.js

Recently, during the creation of a node project, I defined a model as follows: export default class Tokens { constructor() { this.accessToken = ''; this.refreshToken = ''; } getAccessToken() { return ...

javascriptnode.js

Having trouble integrating a custom button into the toolbar of the Tinymce Vue.js wrapper

Struggling to add a custom button to the toolbar of tinymce using the vue.js wrapper (utilizing vue 3 and tinymce 5). The problem is that the custom button is not appearing in the toolbar. I have attempted the following steps, the logs in the init and set ...

javascriptvue.jsvuejs3tinymce

Update the Div content with animation on the change

I have mastered the art of refreshing a DIV element, but now I am looking to take it up a notch by incorporating an animation into the transition. The idea is that when a user approves an offer, the div containing a series of boxes should elegantly 'm ...

javascriptjqueryhtmlrefresh

Manage the timing of ARI function calls by utilizing the power of JQuery and socket.io

Currently, I am facing a challenge where two functions are automatically called when adding a call to a bridge. I aim to use JQuery to ensure these functions are only triggered upon button click, and then proceed with server-side modifications. The issue ...

javascriptjquerysocketssocket.ioasterisk

Guide on Creating a Smooth jQuery Scroll Animation from Top to Bottom and Bottom to Top for a Landing Page Navigation Menu

I'm in the process of developing a landing page website where my navigation links smoothly scroll to different sections on the page. Currently, when I click on a nav link, it instantly takes me to the bottom and then back to the top. However, I want t ...

javascriptjqueryhtmlcssjquery-animate

Troubleshooting problems with opening and closing windows in JavaScript

I'm currently facing an issue with managing browser windows using JavaScript. In my proof of concept application, I have two pages - one for login information (username, password, login button, etc.) and the second page is a management screen. What I ...

javascripthtmlxhtmlbrowserdhtml

Custom action in Bokeh with a personalized icon

Currently, I am working on creating custom actions for a bokeh plot within the toolbar. In order to achieve this, I require custom icons as well. To begin, I referred to this example which demonstrates creating a drawing tool. So far, everything is functi ...

javascriptpythoncssfont-awesomebokeh

Adding an event listener to the built-in arrow buttons on the `<input type=number>` element is a simple way to enhance user interaction

<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...

javascripthtmljquerycssevents

What is the best way to utilize the $('input').on('change', function() method within AngularJS?

I am working on creating a registration form page using AngularJS and I need to display the percentage completed. The form consists of over 50 fields, so I am looking for a simple way to implement this functionality. Below is a snippet of the code I have ...

javascriptangularjs

Following the submission of a POST request, an error occurred stating: "Unable to assign headers once they have been sent to

I'm having trouble figuring out what's wrong with my code. Whenever I send a post request, I get an error message saying "Cannot set headers after they are sent to the client". My model includes a comment schema with fields for user, content, and ...

javascriptnode.jsmongodbexpressmongoose

Preserving reference equality while passing props in React

Consider a scenario where a function dynamically generates some props for a component, and you want to pass all of them without specifying each individual prop that the function might generate. Typically, this can be achieved using the spread operator. How ...

javascriptreactjs

Using a global variable in Vue and noticing that it does not update computed variables?

Currently, I'm in the process of developing a web application and have begun implementing authentication using firebase. Successfully setting up the login interface, my next step is to propagate this data throughout the entire app. Not utilizing Vuex ...

javascriptfirebasevue.jsfirebase-authenticationvuetify.js

Present the retrieved JSON data values in an alternative layout on the table

I am facing an issue with the data display in my current table setup. The data is fetched from an SQL server, encoded into JSON format, and the structure of the JSON output is causing a problem for me. You can see how it looks like here: The challenge I a ...

javascriptangularjsjson