Add or remove an ID from the swatch gallery based on its presence or absence

I'm currently working on a handleClick function for a gradient swatch gallery. The goal is to add an id of "bg-gradient" to the clicked element, and if another swatch is clicked, remove that id from the previously clicked swatch and add it to the newly clicked one. Essentially, only one element should have the id"bg-gradient" at any given time. Although my code is close to working, it currently adds the id to every clicked swatch, which is not the desired behavior. I believe this issue should be relatively simple to resolve, but I'm struggling to make it work. Please see the code snippet below and the attached screenshot showing the problem (all 4 swatches getting the id).

handleSwatch(){
    let el = document.querySelectorAll('.swatch');
    for(let i=0; i < el.length; i++) {
    el[i].addEventListener('click', function () {
      if (!document.querySelector("swatch#bg-gradient")) {
      el[i].setAttribute('id', 'gradient');
    } else {
        alert('Element exists!');
    }
      });
    }
   }
 }

[![Remove first (or set if not exist), add new id to clicked element][1]][1]

Thanks

Answer №1

If you need a solution, consider implementing the following code snippet:

const swatches = document.querySelectorAll('.swatch');

swatches.forEach(swatch => {
  swatch.addEventListener('click', () => {
    const gradientSwatches = document.querySelectorAll('.swatch#bg-gradient');
    
    gradientSwatches.forEach(gradientSwatch => gradientSwatch.removeAttribute('id'));
    
    swatch.setAttribute('id', 'bg-gradient');
  });
});

To see this code in action, visit this link.

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

The Chrome extension I created using JQuery to trigger 'keyup' events is not updating the value of the 'input' field on a website that utilizes knockout JS

I am currently working on developing a Google Chrome extension for a website that appears to be utilizing 'knockout JS'. Let's take a look at the HTML element below: <input type="text" class="form-control text-right" id="amount" autoco ...

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

Issues with LocalStrategy not executing in passport authentication

I am currently facing an issue with authenticating using Passport and LocalStrategy. It seems like the strategy is not being called and when I log the user object in passport.authenticate, it returns "false". Below is my client-side code: logIn = () =& ...

Tips for Maintaining the Execution of a JavaScript Function Within a Class until the Browser Window is Closed (Web Development)

The title might be a little confusing, so let me clarify here: I have implemented a popup that appears in the bottom right corner of a specific page on my website. The popup is working as intended (it shows up when the page is initially opened and can be ...

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

Is there a way to extract the URL I am supposed to be redirected to upon clicking a button on a website, without actually being redirected? The button triggers a complex Javascript function and is not a simple hyperlink. click() method doesn't meet my ...

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

Achieving Automatic Scrolling of Drawer in Material UI React JS

Looking for assistance, can anyone lend a hand with this code snippet I've been working on? See it here: https://codesandbox.io/s/5xoj9zw56l I referenced this code as part of my project development: https://codesandbox.io/s/6jr75xj8y3 ...

Trigger jQuery Waypoints Only Once

Utilizing , I am seeking to trigger a specific action when the user scrolls down to the section marked with the class div1. However, the action should only occur once and not repeatedly each time the user reaches that point. — just once $('.div1&ap ...

Combining two observable entities

Utilizing Angular 4 and rxjs, the objective is to fetch data from two distinct servers in JSON format, merge this data, and exhibit it in a list by associating the list with an observable array. **Word Search Component TypeScript File:** @Component( ...

Issue with second button in Angular Onclick() not been resolved

I'm experiencing an issue with the onClick() methods in my code. There are two onClick() methods present on the UI, but when I click on the second one, it does not call the method while the first one does. I am struggling to figure out why this is hap ...

Concealing the submit button until a file has been selected

How can I make the submit button invisible until a file is selected? <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="imageURL[]" id="imageURL" /> <input type="submit" value="submi ...

Ways to manage absent embedded expressions in template literals

I'm curious about the most effective way to handle expressions in a template literal. The following code functions correctly var val1 = "Hello" var val2 = "world" var template = `${val1} ${val2}!` console.log(template) However, suppose for some rea ...

"Utilizing jQuery's bind method with IE 7 compatibility and the use of

One of the scripts I'm working with is a treeview script, and a portion of it appears like this: root.find("." + classControl).each(function () { $(this).bind('click', function () { if ($(this).text() == "-") { $(thi ...

What sets apart the $ and $() functions in jQuery?

After reviewing the jQuery API, I noticed that $() represents a collection of matched elements. However, I am curious about the significance of $. An example from the imagesLoaded library is provided below. if ( $ ) { $.fn.imagesLoaded = function( opt ...

Limit file selection to images using MUI File Input

I am currently using MUI File Input in React for a file input element. The code I have works well, but I would like to restrict this file input to only accept images. How can I achieve this? Here is what I have done so far: const [locationImg, setLoc ...

Encountering a React error when attempting to generate a URL for an image in Sanity

Server Error Error: The asset reference 'e173af30-fd2d-42ed-a364-d92a2cddf32c' is malformed. It should be in the format of an id such as "image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg".https://i.stack.imgur.com/koC26.png https://i.stack.imgur.com/ ...

Leveraging the power of the 'var' keyword in JavaScript when

I have a javascript code snippet that looks like this: var grade_type = document.getElementById("grade_type").value; gradesRef.set({ grade_type: firebase.firestore.FieldValue.arrayUnion(grade) }); However, when the data is stored i ...

Extracting an ID value from a select box in Vue.js

I'm attempting to extract the value of idTipoExame from the following JSON: { "idTipoExame": "11", "mnemonico": "AUR", "exame": "ACIDO URICO" }, { "idTipoExame": "24&qu ...

Controlled Material-UI v5 DateTimePicker triggers input focus upon closure

Is there a way to have 2 DateTimePicker components as siblings, and when I click on the second one while the first one is still open, it should open a new DateTimePicker with focus on it? Can someone help me achieve this? Link to code example I want the ...

The magic of Angular's data binding post-ajax retrieval

My situation is as follows: /items/item/123/edit and I have a controller that combines both the view and edit functionalities: ... if ($routeParams.id) { $scope.itemId = $routeParams.id; $scope.editMode = true; Item.getB ...