choosing an item depending on the chosen value

I am working on implementing a feature where the value of a select element determines how another element transitions.

In my scenario, I have two tags with data in them:

<select data-name="name goes here" updateElement()></select>

<select value="what ever option is picked" applyTransition()></select>

Whenever the option of the data-name select element is changed, it will update a variable associated with the element that should transition.

The main objective is to have the second select element trigger a transition effect on a specific element based on the choice made in the first select element.

I opted not to include the actual code as it is quite extensive, but I can provide what is necessary upon request.

javascripthtmlcssfunctionelement

Answer №1

After hours of struggling with the console, I finally cracked the code on this one.

const targetElements = document.querySelectorAll(".target-class");
let selectedElement;

If your elements have a specific data-property assigned, you can easily extract that one.

for(let i = 0; i < targetElements.length; i++){
if(select.value === target-class[i].dataset.property){
selectedElement = document.querySelector(`[data-property= 
${locationHands[i].dataset.property}]`);}

Now, you should see selectedElement as the desired element.

Feel free to utilize that variable wherever necessary.

If there's a more efficient method to accomplish this task, kindly share it with me!

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

Why does the AngularJS ngRepeat filter permanently remove null values?

Check out this JSFiddle demonstration I created to illustrate the problem: http://jsfiddle.net/s6Lj2/2/ Observe that in the dataset $scope.places = [{ name: 'Chicago', status: 'Active', analyst: 'Sam', recor ...

javascriptarrayshtmlangularjs

I'm currently facing some issues with switching my navigation bar on and off. I am utilizing the most recent version of Bootstrap, which is v5.1.3

Greetings! I'm new here and still learning the ropes, so please bear with me if I make some mistakes. I'm having an issue with my navbar-toggler not functioning as expected. I've tried various methods like adding older script sources and boo ...

htmlbootstrap-5

Why does Axios keep timing out despite successful testing in Postman?

Trying to set up a single request for my app using axios with express/node js. Here is the code snippet that was generated through the Postman app. I have attempted different variations by creating my own form, but I always end up with the same result. co ...

javascriptnode.jsapiexpressaxios

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Can each content within ngView be animated individually upon entering, rather than the entire View (div) itself? ...

javascripthtmlcssangularjs

When using the SASS @debug directive, it has the ability to display two distinct values for a single variable

Encountering an issue while compiling a scss file to css, the error message reads as follows: Error: src/scss/_custom.scss Error: Incompatible units: 'rem' and 'px'. To address this, I inserted @debug directives above the problematic ...

csssass

Techniques for incorporating a variable into the value field in JavaScript

let y = data[1]; cell1.innerHTML ='<input id="text" type="text" value= "'y'"/>' ; This snippet of code does not render any content when attempting to pass the variable, but if you provide a specific value like "h", it will displa ...

javascriptphphtml

Attempting to bring in an image file into a React component

My attempt to add an image at the top of my file failed, so I am looking for help with importing it. The code I originally tried did not work. The image does not display using the code below <img src={require('../../blogPostImages/' + post.bl ...

javascriptreactjsimageimportimporterror

When flex items refuse to shrink despite using flex-shrink

I'm struggling to shrink the flex items in my layout despite using the flex-shrink property. I've experimented with adjusting the vh and vw values of the .row (flex parent), playing around with margins and padding, but still, the items won't ...

cssflexbox

Rotating the model from its center after panning the model

Hey there! I've been tinkering around with Three.js and loading JSON models using JSONLoader. I also have TrackballControls.js set up for some basic interaction. However, I've noticed that the rotation behaves differently after moving (PAN) the o ...

javascriptthree.js

Utilizing GraphQL Global Object Identification with NestJS using the code-first strategy

Currently, I am trying to incorporate Global Object Identification as outlined in the GraphQL documentation into my NestJS project. 1.) First, I created a Node interface: import { ID, InterfaceType, Field } from '@nestjs/graphql' @InterfaceType ...

javascriptnode.jstypescriptgraphqlnestjs

Steps for resetting the counter to 0 following an Ajax Refresh or Submission to the database

I have been working on a code that successfully sends multiple data to a MySQL Database using JQuery Ajax. Everything works smoothly, but I encountered an issue when trying to refresh the page with ajax and add a new record; it populates the number of time ...

javascriptphpjquerymysqlajax

The precedence of theme CSS is paramount

Check out this link for Smirnoff Espresso Vodka 70cl (password: hide) Upon inspecting the page source, you'll see that my main stylesheet (main-style) is loaded at the top of the head section with high priority, even above my theme's style. Why ...

csswordpress

Transforming a JSON object into a list in C#

After exploring similar posts without success, I am reaching out here for help. I have a Json data stored in a hidden field that I am trying to access in the code behind file of my markup page. My goal is to convert this Json into a List and bind it to a ...

javascriptc#json

How can we send a JSONArray through a dynamically generated button event and then retrieve the elements of the JSONArray?

In the following SCRIPT code snippet: var jsonArr = [ { " name": "John", "age": 31, "city": "New York" }, { "name": "Smith", "age": 25, "city": "Dubai" } ]; function create() { createButton(jsonArr); } function cre ...

javascriptarrays

It appears that the pixel sizes are different than what was originally designed

In my project, I have a header panel where the burger button is designed with a width of 32px and height of 24px. .header { display: flex; font-weight: bold; font-size: 50px; height: 100px; border: 1px solid black; position: relativ ...

javascripthtmlcssuser-interfacefrontend

Attempting to organize date and time down to the second

I'm currently working on sorting time with seconds included. While I am able to sort the minutes successfully, I'm facing difficulty in sorting the seconds. Despite trying various approaches and using dynamic data that needs to be sorted in desce ...

javascriptjquerymomentjs

When capturing photos using h5 on iOS devices, the browser may experience a flash back issue

I have been searching Baidu and Google for a while now, but I still haven't found a solution. Here is the specific issue: When using h5 to take photos on iOS systems, the browser flashes back. HTML Code <img src="xxx" onclick="sta ...

javascripthtmlvue.js

Is there a delay when dynamically filling out an input field in a form with the help of the jquery .keypress() function?

I have a form that I want to populate dynamically with the values from another form. It's almost working as intended, but there seems to be a delay of some sort. For example, if I enter "ABCDE" in field1, field2 will only populate with "ABCD". It ne ...

jqueryhtmlajax

Make jQuery fire an event when the "enter" key is pressed

I'm trying to create an event that will trigger when the "enter" key is pressed. I've been using this code, but for some reason it's not working and I can't figure out why. After searching everywhere, I came across this snippet that see ...

javascriptphp

Could it be that my font awesome icons aren't displaying because of my use of xampp?

I am currently working on building a website, but I have encountered two main issues. Firstly, I have to clear my web cache every time I search for something. Secondly, the font-awesome icon is not showing up properly. <html lang="en"> &l ...

htmlfont-awesome