www.webdeveloper.com
Results 1 to 4 of 4

Thread: Simple If Else statement to change div Color

  1. #1
    Join Date
    Jul 2013
    Posts
    2

    Question Simple If Else statement to change div Color

    Hi,

    i spent a few hours and can't get past this simple code, my first If works, but the else always fail once the bg color has changed to pink.
    The initial color is red. If I click once, it turns into pink as expected. If I click again, (once the background has changed to pink), it does not do anything where as I would like it to change into Green, and then Pink, then Green

    Any clues? am I using the wrong listener?

    function changeWrapperBackgroundColor()
    {
    var wrapper
    wrapper = document.getElementById("wrapper");
    if(wrapper.style.backgroundColor !== "Pink")
    {
    wrapper.style.backgroundColor = "Pink";
    }
    else
    {
    wrapper.style.backgroundColor = "Green";
    }
    }
    I would then call the above function in my window.onload = init;
    as below:
    wrapper.addEventListener('click',changeWrapperBackgroundColor,false)

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    Once you set the backgroundColor to "Pink" ... it converts it to RGB. So when you try to get the value again, you need to compare against that:

    rgb(255, 192, 203)

    It doesn't know what "Pink" is.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Right, as mentioned above the browser might manipulate the value you've given it into something it prefers, breaking your comparison later.
    Instead you can try keeping track of the color/colors internally to your script...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    
    			var
    				changeWrapperBackgroundColor = (function(cols)
    				{
    					return function()
    					{
    						document.getElementById('wrapper').style.backgroundColor = cols[0];
    						cols.push(cols.shift());
    					};
    				}(['pink', 'green', 'blue']));
    
    			window.addEventListener('click', changeWrapperBackgroundColor, false);
    
    		</script>
    	</head>
    	<body>
    
    		<div id="wrapper">Hello World</div>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    Another way would be to use classes in the CSS. Here's a quick way with jQuery:
    http://jsfiddle.net/BByYj/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles