Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can you assign an element's class list to a variable by clicking on the element?

The main question I have is: Is there a way to assign to a variable an element’s class list by clicking on said element without directly referencing the element in the JavaScript.

Expanding on this, I’m trying to create a function that – on clicking an image in a photo grid – expands the image making it clearer for people to see. I made a for loop that loops through an array that contains the class lists of all images in the grid, the idea was that upon clicking on any one of the images a function that contains the loop would be called and the class list for the image that was clicked would be stored as a variable, the loop would then compare each value in the array to the variable and upon a match would apply a class that enlarges that particular image, this way I could use one function for every image in the grid instead of writing 15+ functions where each one was called depending on the image clicked. I’ve run into an issue when trying to retrieve the class list for the image that was clicked on – that being I can’t figure out how to retrieve the class list for an element by clicking on said element without referencing it. What I mean by this is that I’m not trying to use querySelector() or getElementById()/ClassName() to directly reference the element (in this case photo) as I’d have to write 15+ different functions all corresponding to a specific element (photo). Instead I’m trying to pull the classList for any one element in a group of elements with only one function

As I said I could just make 15+ different functions each with a variable directly assigning that specific images class but that hardly seems like the best way to do this. If this just isn’t possible also let me know please.

My JS as it stands:

function enlarge() {
    let figureArray = [] = document.querySelectorAll(".photo-grid figure");
    let figure = ; //This is where the class list of the clicked element would be stored
    for (let i = 0; i < figureArray.length; i++ ) {
        if (figureArray[i] === figure) {
            figureArray.item(i).classList.toggle("zoom"); 
        }
    }
};
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The previous answer doesn't work in either capacity unless you use .currentTarget instead of .target as the event listener is what triggered the event, and for anyone looking for an answer to my question this actually just doesn't suffice so don't bother trying it


  2. 0

    The documentation appears to offer some options. You could get the whole list of classes as a string:

    document.querySelector('button').addEventListener('click', e => {
  const classes = e.target.classList.value;
  console.log(classes);
});
    <button class="foo baz">click</button>

    Or perhaps you want to iterate over the list individually:

    document.querySelector('button').addEventListener('click', e => {
  const classes = [];

  for (const value of e.target.classList.entries()) {
    classes.push(value[1]);
  }
  
  console.log(classes);
});
    <button class="foo baz">click</button>

    In these examples I’m simply referencing the clicked element from the target of the click event itself. Presumably you have the same option available to you, the code shown just doesn’t demonstrate that. If this function is being invoked by a click event then you should probably at least pass along the event object to this function. Or if you have some other way to identify the element, that works too.

    Login or Signup to reply.
  3. 0

    You can attach an event listener to each photo, or use event delegation like I have here, attaching the listener to the container element, and checking to see if the clicked item is the desired element. Write a callback function that looks at the event passed to it to determine which element was clicked and log its classList.

    document.getElementById("container").addEventListener(
  "click",
  e => {
    if (e.target.classList.contains("photo")) {
      console.log(e.target.classList.value)
    }
  }
 );
    <div id="container">
<div class="photo one">photo placeholder 1</div>
<div class="photo two">photo placeholder 2</div>
<div class="photo three">photo placeholder 3</div>
<div class="photo four">photo placeholder 4</div>
<div class="photo five">photo placeholder 5</div>
<div class="photo six">photo placeholder 6</div>
<div class="photo seven">photo placeholder 7<div>
<div class="photo eight">photo placeholder 8</div>
<div class="photo nine">photo placeholder 9</div>
<div class="photo ten">photo placeholder 10</div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search