Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    46
    Thanks
    5
    Thanked 1 Time in 1 Post

    Why, oh why, does this code not fly?

    Following is a code snippet. Not fully functional, but a demonstration of frustration I've been working on for the last few hours. There appears to be something wrong with the switch command in the function. When the switch command commented out, you can see the "After switch" displayed in the output div. If it is not commented out, "After switch" does not show up. It's as if code processing is terminated by the switch command, perhaps an issue with the break.

    Code:
    <html>
    <head>
    	<script type="text/javascript">
    		function ChangeElementColor(objName,ToColor,ColorType,Speed)
    			{
    			objId=document.getElementById(objName);
    			document.getElementById("output").innerHTML="Before switch<br>";
    			switch(ColorType.toUpperCase())
    				{
    				case "FG":
    					CurColor=objId.style.color;
    					break;
    				case "BG":
    					CurColor=objId.style.background-color;
    					break;
    				case "BORDER":
    					CurColor=objId.style.border-color;
    					break;
    				}
    				document.getElementById("output").innerHTML=document.getElementById("output").innerHTML+"After switch";
    			}
    	</script>
    </head>
    <body>
    	<div id="ChangeColorDiv" style="position:absolute;left:0px;top:150px;width:200px;height:40px;border:5px solid green;overflow:hidden;background-color:#ffff00" onmouseover='ChangeElementColor("ChangeColorDiv","#ff0000","BG",40);' onclick='ChangeElementColor("ChangeColorDiv","#ffff00","BG",40);'>
    		Hover to change color ...
    	</div>
    
    	<div id="output" style="position:absolute;top:400px;border:2px solid black;width:500px;height:100px" onclick='getElementById("output").innerHTML=getElementById("ChangeColorDiv").style.color;'>
    		&nbsp;
    	</div>
    
    </body>
    </html>

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    there are two erros, correct them and it will work:
    1. replace this
      Code:
      CurColor=objId.style.background-color;
      with this
      Code:
      CurColor=objId.style.backgroundColor;
    2. replace this
      Code:
      CurColor=objId.style.border-color;
      with this
      Code:
      CurColor=objId.style.borderColor;


    In fact you are using attributes of the style the same way you write them in a CSS file, and this is not very accurate for all attributes.

    Here is a link to the style attributes and their usage in javascript:
    http://www.irt.org/xref/style.htm
    Software and cathedrals are much the same - first we build them, then we pray.

  • Users who have thanked ckeyrouz for this post:

    SlowCoder (09-28-2009)

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    46
    Thanks
    5
    Thanked 1 Time in 1 Post
    Awesome ... Another lesson learned. Once pointed out, I should have seen that JS was probably seeing "background-color" as a mathematical operation, and not a property.


  •  

    Posting Permissions

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