SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Javascript with CSS and DOM

    Hello everyone,

    This is a practice script and is not meant for real world use.

    I can't get this to work. The code is suppose to change the background color of the div tag.

    Any ideas?

    Code:
    <script type="text/javascript">
    <!--
    function changeColor(){
    	var divTag = document.getElementsById("div");
    	for (var counter = 0; counter < divTag.lenght; counter++){
    		divTag[counter].style.background = "#FF0000";
    	}
    }
    //-->
    </script>
    </head>
    
    <body>
    <div style="width: 200px; height: 200px;">I love soupterines</div>
    <input type="button" value="Change Color" onclick="changeColor()" />
    </body>
    Thanks!!

    Novice2010

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work because you haven't given the DIV an id. Also, it's document.getElementById - note the spelling.

    You have a spelling mistake in the for loop - look at your spelling of length. But that is not relevant, because you don't need a for loop at all. getElementById will only return one tag. This is because the id is supposed to be unique - only one element can have a single id.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This one might help you with other possibilities. It toggles the colour as you click on the button.

    <html>

    <head>

    <script type="text/javascript">
    <!--
    // flag to keep track of colour setting
    var bgColorSet=false; // global
    //
    function changeColor()
    { var divTag=document.getElementById("div1");
    // check and set color if white make it red, if red make it white
    var bg=(bgColorSet==false)?"F00" : "FFF";
    divTag.style.backgroundColor=bg;
    // reset flag
    bgColorSet=(bgColorSet)?false : true;
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #div1 {position:relative; top:2px; left:5px; width:200px; height:200px; border:1px solid #000; }
    .a18B { font-size:18px; font-weight:bold; color:#000; text-indent:10px; }
    -->
    </style>
    </head>

    <body>

    <div id="div1">
    <p class="a18B">I love soupterines
    </div>
    <!-- end div1 -->
    <p><input type="button" value="Change Color" onclick="changeColor()"></p>

    </body>

    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    It doesn't work because you haven't given the DIV an id. Also, it's document.getElementById - note the spelling.

    You have a spelling mistake in the for loop - look at your spelling of length. But that is not relevant, because you don't need a for loop at all. getElementById will only return one tag. This is because the id is supposed to be unique - only one element can have a single id.

    Thanks for pointing that out and sorry for the confusion, I originally had document.getElementsByTagName. But change it to ID when that wasn't working before posting the script.

    Thanks again.

    Novice

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    This one might help you with other possibilities. It toggles the colour as you click on the button.

    <html>

    <head>

    <script type="text/javascript">
    <!--
    // flag to keep track of colour setting
    var bgColorSet=false; // global
    //
    function changeColor()
    { var divTag=document.getElementById("div1");
    // check and set color if white make it red, if red make it white
    var bg=(bgColorSet==false)?"F00" : "FFF";
    divTag.style.backgroundColor=bg;
    // reset flag
    bgColorSet=(bgColorSet)?false : true;
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #div1 {position:relative; top:2px; left:5px; width:200px; height:200px; border:1px solid #000; }
    .a18B { font-size:18px; font-weight:bold; color:#000; text-indent:10px; }
    -->
    </style>
    </head>

    <body>

    <div id="div1">
    <p class="a18B">I love soupterines
    </div>
    <!-- end div1 -->
    <p><input type="button" value="Change Color" onclick="changeColor()"></p>

    </body>

    </html>
    Thanks for the contribution!!

    I'll mess around with it.

    Nov


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •