www.webdeveloper.com
Results 1 to 3 of 3

Thread: Checkbox changing font style

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    5

    Checkbox changing font style

    Hey, I'm trying to get the font of some text to change to normal and black in color when the check box is ticked, i thought i had it but it doesnt work, does anyone have any suggestions?

    Code:
    <p id="p1"  style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    	    <input type="checkbox" id="termsChkbx" onclick="hasReadTerms( this.id, 'sub1', 'p1')" /></p>
    	    
    	    
    
    	    <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
      
    		<script type="text/javascript">
    		
    		function hasReadTerms( checkBoxID, buttonID, style) {
    			// only enable the submit button if the accept terms box is checked
    			var chkbx = document.getElementById( checkBoxID );
    			var submitBtn = document.getElementById( buttonID );
    			var style = document.getById( style );
    			
       			if ( chkbx.checked ) {
    				submitBtn.disabled = false;
    				style.color = #FFFFFF;
    				style.font-weight= normal;
    				
    				
    			}
    			else {
    				submitBtn.disabled = true;
    				style.color = #FF0000;
    				style.font-weight= bold;
    				
    			}
    			}
    The submitBtn part works, but i cant seem to get the font to change. Thanks

  2. #2
    Join Date
    Jan 2010
    Posts
    79
    Hi bud

    Wile boolean values like true and false don’t need to be wrapped in quotes string values like “normal” and “#ffffff” do, one thing to note here is that the hex value for black is “#000000”

    If you want your variable “style” to reference your p element's style you will need to change it to:
    Code:
    document.getElementById(style).style
    The other thing is that in javascript because the “-” is the minus sign javascript thinks that you are trying to subtract “style.font” from “weight” which as you might imagine throws up an error. So it needs to be changed to “style.fontWeight”.

    Here is a working version of your code:
    Code:
    <p id="p1" style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    	    <input type="checkbox" id="termsChkbx" onclick="hasReadTerms( this.id, 'sub1', 'p1')" /></p>
    	    <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
      
    		<script type="text/javascript">
    		
    		function hasReadTerms( checkBoxID, buttonID, style) {
    			// only enable the submit button if the accept terms box is checked
    			var chkbx = document.getElementById( checkBoxID );
    			var submitBtn = document.getElementById( buttonID );
    			var style = document.getElementById( style ).style;
    			
       			if ( chkbx.checked ) {
    				submitBtn.disabled = false;
    				style.color = "#000000";
    				style.fontWeight= "normal";
    			}
    			else {
    				submitBtn.disabled = true;
    				style.color = "#FF0000";
    				style.fontWeight= "bold";
    			}
    			}
    </script>
    Last edited by Vince616; 04-20-2013 at 06:10 PM.

  3. #3
    Join Date
    Apr 2013
    Posts
    5
    Thanks dude! So much of this seems obvious when you see the solution!!

Thread Information

Users Browsing this Thread

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

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