How to change text color using javascript for loop?

Question

When someone click on the text it change to red color and click on the other text return to black color. I have make an example like below but how to make it shorter using for loop?

    <html>
    <head>
    <title>My little test page</title>
    </head>
    <body id="body">
        <div id="myid">Hello Here !!</div><br>
        <div id="myid2">Hello There !!</div><br>
        <div id="myid3">Hello !!</div><br>
        ......many div......
    </body>
    </html>

    <script language="javascript">
    function changeColor1() {
    document.getElementById("myid").className = "red";
    document.getElementById("myid2").className = "";
    document.getElementById("myid3").className = "";
    }

    function changeColor2() {
    document.getElementById("myid").className = "";
    document.getElementById("myid2").className = "red";
    document.getElementById("myid3").className = "";
    }

    function changeColor3() {
    document.getElementById("myid").className = "";
    document.getElementById("myid2").className = "";
    document.getElementById("myid3").className = "red";
    }

    function init() {
    document.getElementById("myid").onclick = changeColor1;
    document.getElementById("myid2").onclick = changeColor2;
    document.getElementById("myid3").onclick = changeColor3;
    }

    window.onload = init();
    </script>

Should just the color of the current text change, or do you want a class named 'red' applied to it ? The code above changes the class, but there is no styling info, so it will be invisible as it is. — Dangelov
– Dangelov, Commented Feb 14, 2013 at 4:35

SHANK · Accepted Answer · 2013-02-14 04:12:49Z

1

Add an attribute name to all the divs, like this

<div id='myid' name='colorchangingdiv[]'>Hello</div>
<div id='myid2' name='colorchangingdiv[]'>Hello</div>
....

Now in your init function

function init() {
var allDivs = document.getElementsByName('colorchangingdivs[]');

    for( var i =0; i < allDivs.length; ++i )
    {
       allDivs[i].onClick = changeColor(this);
    }
}

In your change color function

function changeColor( obj )
{
    var allDivs = document.getElementsByName('colorchangingdivs[]');

    for( var i =0; i < allDivs.length; ++i )
    {
       allDivs[i].style.color = '';
    }

    // Now set the color to the obj passed
    obj.style.color = 'red';
 }

Hope that helps.

answered Feb 14, 2013 at 4:12

SHANK

2,96825 silver badges31 bronze badges

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

Comments

score 1 · Accepted Answer · 2013-02-14 04:49:44Z

1

Try this one.

    <html>
        <head>
        <title>My little test page</title>
        </head>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
      <script language="javascript">
     $(".divid").click(function(e){
         $(".divid").css('color', '');
         $(this).css('color', 'red');

       });
       </script>
 <body id="body">
 <div id="myid" class="divid">Hello Here !!</div><br>
 <div id="myid2" class="divid">Hello There !!</div><br>
 <div id="myid3" class="divid">Hello !!</div><br>
 ......many div......
 </body>
 </html>

Example jsfiddle

edited Feb 14, 2013 at 4:49

answered Feb 14, 2013 at 4:05

user1423506

1 Comment

Yang Over a year ago

he asked how to do that in a loop

Willy · Accepted Answer · 2013-02-14 04:13:49Z

0

<html>
<head>
<style>
  .red{
  color:red;
 }
</style>
<title>My little test page</title>
<script type="text/javascript" src="jquery.js">
<script language="javascript">
  //use jquery for change your color
  $(document).ready(function(){
   $(".myclass").click(function(){
    $(".myclass").removeClass("red");
    $(this).addClass("red");
   });
  });
</script>
</head>
<body id="body">
    <div class="myclass">Hello Here !!</div><br>
    <div class="myclass">Hello There !!</div><br>
    <div class="myclass">Hello !!</div><br>
    ......many div......
</body>
</html>

answered Feb 14, 2013 at 4:13

Willy

1

Comments

Dangelov · Accepted Answer · 2013-02-14 04:30:11Z

For convenience, use classes instead of, or in addition to the id attributes of the div tags above:

<!DOCTYPE html>
<html>
   <head>
      <title>My little test page</title>
   </head>
   <body id="body">
      <div class="mytext">Hello Here !!</div><br>
      <div class="mytext">Hello There !!</div><br>
      <div class="mytext">Hello !!</div><br>

      <script>
        var myselector = 'div.mytext';
        function changeColor( e ){
          var x=document.querySelectorAll(myselector);
          for(i=0;i<x.length;i++){
            x[i].style.color = '';
          }
          e.target.style.color = 'red';
        }      
        function init(){
          var x=document.querySelectorAll(myselector);
          for(i=0;i<x.length;i++){
            x[i].addEventListener("click", function(e){
              changeColor(e);
            });
          }
        }
        window.onload = init();
      </script>
   </body>
</html>

Collectives™ on Stack Overflow

How to change text color using javascript for loop?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related