SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Can the style of a html element be used for conditions ex. if

    Lets say that I have a <p id"myid"> tag where I know the background is #FFFFFF, can I do something like

    Code JavaScript:
    if (document.getElementById("myid").style.background=="#FFFFFF")
    {
    do this;
    }

    if so, how is it done, since I tried it the way explained above and it does not work for me.

    I know it sounds weird what Im trying to do but I would like to figure a way

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are several problems to this approach. Unless you set the background colour yourself on loading the page the test will fail, even though you set the colour using css.

    Try this small script with and without the line setting the colour on a div that has a white background set in your css style.

    window.onload=function()
    { var elem=document.getElementById("myDiv")
    elem.style.backgroundColor="#000000"; // comment this out and run again
    alert(elem.style.backgroundColor)
    }

    Another problem is that even if you do set the colour, IE browsers will return #000000 for a black background-color and non-IE browsers will return RGB(0,0,0). This makes comparison difficult without browser sniffing.

    Also, if you decide to use the rgb format for all browsers, IE returns rgb(0,0,0) on testing and some non-IE browsers return rgb(0, 0, 0). One is separated by spaces, the other is not.

    You can solve the problem, but the script is a lot longer than you think!

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    There are several problems to this approach. Unless you set the background colour yourself on loading the page the test will fail, even though you set the colour using css.

    Try this small script with and without the line setting the colour on a div that has a white background set in your css style.

    window.onload=function()
    { var elem=document.getElementById("myDiv")
    elem.style.backgroundColor="#000000"; // comment this out and run again
    alert(elem.style.backgroundColor)
    }

    Another problem is that even if you do set the colour, IE browsers will return #000000 for a black background-color and non-IE browsers will return RGB(0,0,0). This makes comparison difficult without browser sniffing.

    Also, if you decide to use the rgb format for all browsers, IE returns rgb(0,0,0) on testing and some non-IE browsers return rgb(0, 0, 0). One is separated by spaces, the other is not.

    You can solve the problem, but the script is a lot longer than you think!
    Thank you for explaining, while waiting for an answer I found a different approach, but I suppose this can only work for certain elements, I used the size="" attribute to access the element.

    The thing is, I was trying to fire an event on a field, but only if the event was not fired before by this same event to keep track of errors, but in my script I want to add an error count only for each field and not multiple error count for each field, I dont even know if I am making any sence.

    Anyway, what I am trying to achieve is field validation while also adding a few extra features, like showing errors to users an so on, have a look at this and let me know what you think, if you have the time...

    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    .consoleoferrors
    	{
    		text-align:left;
    		width:auto;
    		height:auto;
    		position:fixed;
    		top:auto;
    		bottom:auto;
    		right:10px;
    		background:red;
    		color:white;
    	}
    .consoleoferrors2
    	{
    		text-align:left;
    		width:auto;
    		height:auto;
    		position:fixed;
    		bottom:10px
    		right:10px;
    		background:red;
    		color:white;
    	}
    </style>
    </head>
    <body>
    <div id="regulartextfields">
    <input type="text" size="15" id="regulartextfields">
    </div>
    <input disabled="true" id="button" type="submit" value="submit" >
    </form>
    <div id="consoleoferrors" class="consoleoferrors"></div>
    <div id="consoleoferrors2" class="consoleoferrors2"></div>
    			<script type="text/javascript">
    				function checkfield_1(event)
    					{
    						//Global Variables
    							var NOsymbolshere=new RegExp(/[!"$%&()=?^*_:;,.-`+`+]/);
    							var NOnumbershere=new RegExp(/\d/);
    							var thefield=event.target || event.srcElement;
    							var thevalue=thefield.value.toLowerCase();
    					//Conditions
    						if (thefield.size=="14")
    							{
    								thefield.size="15";
    								counterrors--;
    							}
    						if (NOnumbershere.test(thevalue)==true)
    							{
    								document.getElementById("consoleoferrors").innerHTML=("Error.");
    								thefield.style.background="#FFFF00";
    								counterrors++;
    								document.getElementById("consoleoferrors2").innerHTML=("Error.");
    								thefield.size="14";								
    							}
    						else if (NOsymbolshere.test(thevalue)==true)
    							{
    								document.getElementById("consoleoferrors").innerHTML=("Error");
    								thefield.style.background="#FFFF00";
    								counterrors++;
    								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
    								thefield.size="14";
    							}
    						else if(thevalue.length<=1)
    							{
    								document.getElementById("consoleoferrors").innerHTML=("Error");
    								thefield.style.background="#FFFF00";
    								counterrors++;
    								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
    								thefield.size="14";
    							}
    						else if(thevalue.length>=15)
    							{
    								document.getElementById("consoleoferrors").innerHTML=("Error");
    								thefield.style.background="#FFFF00";
    								counterrors++;
    								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
    								thefield.size="14";
    							}
    						else
    							{								
    								thefield.style.background="#FFFFFF";								
    								//Format text ex. (from TEXT to Text or from text to Text or TeXt to Text)
    								var fixvalue=thefield.value.toLowerCase();
    								var fixvalue_2=(fixvalue.charAt(0).toUpperCase()+fixvalue.slice(1));
    								thefield.value=fixvalue_2;
    							}
    					//console of errors last check, if errors submit button is disabled, if no errors, submit button is enabled.
    						if (counterrors>=1)
    							{
    								document.getElementById("consoleoferrors2").innerHTML="Please correct the errors highlighted in yellow!";
    							}
    						else
    							{
    								document.getElementById("consoleoferrors2").innerHTML="";
    								document.getElementById("consoleoferrors").innerHTML="";
    							}
    						if (counterrors>=1)
    							{
    								document.getElementById("button").disabled=true;
    							}
    						else
    							{
    								document.getElementById("button").disabled=false;
    							}
    					}
    				var apply=document.getElementById("regulartextfields");				
    				var counterrors=0;
    				if (apply.addEventListener)
    					{
    						apply.addEventListener("change", checkfield_1, false);
    					}
    				else if (apply.attachEvent)
    					{
    						apply.attachEvent("onchange", checkfield_1);
    					}
    			</script>
     
    </body>
    </html>


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
  •