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>

Answer 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

Answer 2

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.

Answer 3

<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>

Answer 4

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>

How to change text color using javascript for loop?

Question

4 answers

solution1
1

solution2
1 ACCPTED 2013-02-14 04:12:49

solution3
0 2013-02-14 04:13:49

solution4
0 2013-02-14 04:30:11

How to change text color using javascript for loop?

Question

4 answers

solution1 1

solution2 1 ACCPTED 2013-02-14 04:12:49

solution3 0 2013-02-14 04:13:49

solution4 0 2013-02-14 04:30:11

solution1
1

solution2
1 ACCPTED 2013-02-14 04:12:49

solution3
0 2013-02-14 04:13:49

solution4
0 2013-02-14 04:30:11