Tips for including an additional class in an element

Question

Tips for including an additional class in an element

I have an image tag with the "kiwi" class, and another class that makes it spin. I want to toggle this second class (called 'elem') when clicking on the play button of my music player.

Here is the image tag with the class:

<img src="./images/kiwi.png" class="kiwi" aria-hidden="true" />

This is what I want to achieve:

<img src="./images/kiwi.png" class="kiwi **elem**" aria-hidden="true" />

And here is the play button which should add the 'elem' class to the image tag once clicked:

<button onclick="justplay()" id="play"><i class="fa fa-play" aria-hidden="true"></i></button>

Below is the script for the play button:

let play = document.querySelector("#play");

function playsong() {
    track.play();
    Playing_song = true;
    play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}

I want the round image to spin when the play button is pressed

I tried searching online for a solution using classList but couldn't figure it out.

javascript html css

Answer 1

Answer №1

Here's a solution for handling click events on elements with the class 'kiwi':

let el = document.querySelector('.kiwi')

el.addEventListener('click', (e) => {
        e.target.classList.toggle('elem')
    })

.elem{
  border:1px solid red;
}

  <ul>
      <li class="kiwi">1</li>
  </ul>

If you have multiple elements with the class '.kiwi', you can use querySelectorAll and forEach to add event listeners like this:

let el = document.querySelectorAll('.kiwi')

el.forEach((item, index) => {item.addEventListener('click', (e) => {
        el.forEach((toRemove) => {
            toRemove.classList.remove('elem')
        })
        e.target.classList.toggle('elem')
    })
})

.elem{
  border:1px solid red;
}

  <ul>
      <li class="kiwi">1</li>
      <li class="kiwi">2</li>
      <li class="kiwi">3</li>
  </ul>

Answer 2

Here's a solution for handling click events on elements with the class 'kiwi':

let el = document.querySelector('.kiwi')

el.addEventListener('click', (e) => {
        e.target.classList.toggle('elem')
    })

.elem{
  border:1px solid red;
}

  <ul>
      <li class="kiwi">1</li>
  </ul>

If you have multiple elements with the class '.kiwi', you can use querySelectorAll and forEach to add event listeners like this:

let el = document.querySelectorAll('.kiwi')

el.forEach((item, index) => {item.addEventListener('click', (e) => {
        el.forEach((toRemove) => {
            toRemove.classList.remove('elem')
        })
        e.target.classList.toggle('elem')
    })
})

.elem{
  border:1px solid red;
}

  <ul>
      <li class="kiwi">1</li>
      <li class="kiwi">2</li>
      <li class="kiwi">3</li>
  </ul>

Answer 3

Answer №2

If you want to include a new class in an element, follow these steps:

element.classList.add('elem')

You can find additional information on the classList feature.

Answer 4

If you want to include a new class in an element, follow these steps:

element.classList.add('elem')

You can find additional information on the classList feature.

Tips for including an additional class in an element

Answer №1

Answer №2

Similar questions

Facing issues with receiving API response through Postman encountering error { }

Retrieve tag, custom taxonomy, and attachment information using the get_pages function

Syntax error: Your code encountered an unexpected closing curly brace

Implementing optimistic updates with React-query mutations

Submitting data from a JavaScript frontend to a PHP backend

Exploring the Lifecycle Methods in ReactJS / Issue Resurfacing in the Code Snippet

hiding an "input type="file" element by using a button to conceal it

What is the best way to create a dynamic information page using both V-for and V-if in Vue.js?

Guide on incorporating arrays into an array using JavaScript

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

An issue has been encountered in the following module federation: `TypeError: g.useSyncExternalStore is not a function`

What is the best way to comprehend this asynchronous exercise with async/await?

Showcasing Items Within JSON Object in Angular

Focusing on the active element in Typescript

Tips for including multiple directives in a component

Inverted Scrolling Problem in Firefox

Get the desired text following the second <br> tag using jQuery

My Testimonial Slider seems stuck in its current position and won't budge to the left

Establishing a connection to a remote Mongo database using Node.js

Can the key in a WeakMap be altered when setting an item within it?