CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ben McMillan
Ben McMillan

Reputation: 15

How can I change the colours of text on click

I want to be able to change the colour of the text, 'test' in the class, 't1' when I click on them. I want them both to change colour when only one is clicked on. As you can see they are separated by another div, this is just because this is the order I want them in on my page.

Thanks for your help!

<script>

function change(div){
    if (div.style.color == "rgb(252, 198, 162)")
    {
        div.style.color="rgb(220, 20, 60)";
    }
    else
    {
        div.style.color="rgb(252, 198, 162)";
    }
}
</script>


<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>    
<div class="t2" style="color: rgb(252, 198, 162);" onlcick="change(this);">    
  <p> test </p>    
</div>    
<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>

Upvotes: 0

Views: 103

Answers (4)

Chiller
Chiller

Reputation: 9738

This is a simple solution using pure javascript

function change(div) {

  var clasNs = div.className; //get class name of the clicked element

  var elements = document.querySelectorAll("." + clasNs); // get all element that has this class name
  elements.forEach(myFunction) // for each element change color

}

function myFunction(item) {
  if (item.style.color == "rgb(252, 198, 162)") {
    item.style.color = "rgb(220, 20, 60)";
  } else {
    item.style.color = "rgb(252, 198, 162)";
  }
}
<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">
  <p>test</p>
</div>
<div class="t2" style="color: rgb(252, 198, 162);" onlcick = "change(this);">
  <p> test </p>
</div>
<div class="t1" style="color: rgb(252,198,162);" onclick = "change(this);">
  <p>test</p>
</div>

Upvotes: 1

Vinutha N
Vinutha N

Reputation: 166

<!DOCTYPE html>
<html>
<body>

<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>    
<div class="t2" style="color: rgb(252, 198, 162);" onclick="change(this);">    
  <p> test </p>    
</div>    
<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>


<script>
function change(e){
var all = document.querySelectorAll("."+e.className);
if (typeof all !== "undefined") {

for (var i = 0; i < all.length; i++) {
    if(all[i].style.color == "rgb(252, 198, 162)")
    {
    all[i].style.color="rgb(220, 20, 60)";
    }
    else
    {
    all[i].style.color="rgb(252, 198, 162)";
    }
}
}
}
</script>

</body>
</html>

Helps you.

Upvotes: 0

GAURAV ROZATKAR
GAURAV ROZATKAR

Reputation: 1

as said by brk use a common class and you can write code like this to work for second time.

function change(div) 
{ 
if (div.style.color == "rgb(252, 198, 162)"){
$('.t1').css('color',"rgb(220, 20, 60)"); 
} 
else {
$('.t1').css('color', "rgb(252, 198, 162)");
}

without p

Upvotes: 0

loelsonk
loelsonk

Reputation: 3598

We need to use document.querySelectorAll to query all elements with the same class name.

Here is working example, pure javascript.

function change(element){

var elementClassName = element.className;
var allElements = document.querySelectorAll('.' + elementClassName);

  for (var i = 0; i < allElements.length; i++) {

    var changeColorElement = allElements[i];

    // Your logic here
    if (changeColorElement.style.color == "rgb(252, 198, 162)") {
      changeColorElement.style.color="rgb(220, 20, 60)";
    } else {
      changeColorElement.style.color = "rgb(252, 198, 162)";
    }


  }

}
<div class="t1" style= "color: rgb(252,198,162);" onclick="change(this);">

<p>test</p>

</div>

<div class="t2" style="color: rgb(252, 198, 162);" onlcick="change(this);">

<p> test </p>

</div>

<div class="t1" style= "color: rgb(252,198,162);" onclick="change(this);">

<p>test</p>

</div>

Upvotes: 1

Related Questions