Add and remove classes in javascript without jquery

Question

i have some paragraphs. At first one of that should have red color and after click it should become black, and clicked one should become red. I need to change red each paragraph when it is clicked and remove the class when another one is clicked. I should do it with javascript

var p = document.querySelectorAll("p");
for( var i = 0; i < p.length; i++ ){
	p[i].addEventListener("click", makeRed);
	p[0].classList.add("active");
}

function makeRed(){
	p[0].classList.remove("active");

	if( this.classList.contains("active")){
		this.classList.remove("active");
    } else{
    	this.classList.add("active");
    }
    
}

 .active{
    color: red;
  }

<p>Text First</p>
<p>Text Second</p>
<p>Text Third</p>

@Grégory NEUT non) je ne veux pas ecrire comme ca, merci!

Marie
– Marie

2018-06-20 08:03:47 +00:00
Commented Jun 20, 2018 at 8:03 — Marie
– Marie, Commented Jun 20, 2018 at 8:03

Márton Róbert · Accepted Answer · 2018-06-20 08:03:37Z

2

Your code is good, just have a little logical problem :)

var p = document.querySelectorAll("p");
for( var i = 0; i < p.length; i++ ){
	p[i].addEventListener("click", makeRed);
	p[0].classList.add("active");
}

function makeRed(){
	if( this.classList.contains("active")){
		this.classList.remove("active");
    } else{
        for( var i = 0; i < p.length; i++ ){
            p[i].classList.remove("active");
        } 
    	this.classList.add("active");
    }
    
}

 .active{
    color: red;
  }

<p class="active">Text First</p>
<p>Text Second</p>
<p>Text Third</p>

answered Jun 20, 2018 at 8:03

Márton Róbert

1668 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Priyal Pithadiya · Accepted Answer · 2018-06-20 08:03:04Z

0

Try with below solution,

var p = document.querySelectorAll("p");
for( var i = 0; i < p.length; i++ ){
   
	p[i].addEventListener("click", makeRed);
	p[0].classList.add("active");
}

function makeRed(){
   var elems = document.querySelectorAll(".active");
    [].forEach.call(elems, function(el) {
      el.classList.remove("active");
    });
	if( this.classList.contains("active")){
		this.classList.remove("active");
    } else{
    	this.classList.add("active");
    }
    
}

.active{
    color: red;
  }

<p>Text First</p>
<p>Text Second</p>
<p>Text Third</p>

answered Jun 20, 2018 at 8:03

Priyal Pithadiya

8891 gold badge5 silver badges13 bronze badges

Comments

Farhan Tahir · Accepted Answer · 2018-06-20 08:11:08Z

0

Simply use document.querySelectorAll to get all elements and reset their class by removing active and then simply add class to current element.

var p = document.querySelectorAll("p");
for( var i = 0; i < p.length; i++ ){
	p[i].addEventListener("click", makeRed);
	p[0].classList.add("active");
}

function makeRed(){    	
    [...document.querySelectorAll('p')]
      .map(elem => elem.classList.remove("active"));
    this.classList.add("active");        
}

 .active{
    color: red;
  }

<p>Text First</p>
<p>Text Second</p>
<p>Text Third</p>

answered Jun 20, 2018 at 8:11

Farhan Tahir

2,1441 gold badge16 silver badges27 bronze badges

Collectives™ on Stack Overflow

Add and remove classes in javascript without jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related