[SOLVED] Webkit vs Others - Javascript Checkboxes

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
timWebUK
Forum Contributor
Posts: 239
Joined: Thu Oct 29, 2009 6:48 am
Location: UK

[SOLVED] Webkit vs Others - Javascript Checkboxes

Post by timWebUK »

I've run into an issue where a piece of Javascript I have written will only work in a webkit based browser - I have tested and passed with Chrome and Safari. I have failed with Firefox, IE and Opera.

Here is the code:

Code: Select all

function rebar(checked)
{
	var element = document.getElementById('fdn-strip-rebar-weight');
	
	if(checked=="on")
	{
		element.className = "";
	}
	else
	{
		element.className = "hidden";
	}	
	return true;
}
All the above code does is cause a text box to appear when a checkbox is ticked and disappear when unticked. The first part works in all browsers, however when unticking the box, in anything but webkit, the field fails to disappear. Any tips or suggestions?
Last edited by timWebUK on Fri Aug 27, 2010 10:41 am, edited 1 time in total.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Webkit vs Others - Javascript Checkboxes

Post by Weirdan »

How do you call that function?

The most obvious suggestion is to set a breakpoint in firebug and see what are the values for parameter and local variables. Also check if element.className is, in fact, set to 'hidden' before you're leaving the function - if it is, then there's probably a problem somewhere else (like in your css).
User avatar
timWebUK
Forum Contributor
Posts: 239
Joined: Thu Oct 29, 2009 6:48 am
Location: UK

Re: Webkit vs Others - Javascript Checkboxes

Post by timWebUK »

I call it using an onclick event on a checkbox.

I can't see how it would work in some browsers and not others, Chrome is usually pretty good with debugging Javascript. I've checked my CSS and can't see anything wrong with it. I'm just declaring a global class called:

Code: Select all

.hidden
{
display:none;
}
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Webkit vs Others - Javascript Checkboxes

Post by pickle »

console.log() what the value of checkbox is
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
timWebUK
Forum Contributor
Posts: 239
Joined: Thu Oct 29, 2009 6:48 am
Location: UK

Re: Webkit vs Others - Javascript Checkboxes

Post by timWebUK »

First 2 lines are when it was unchecked, second set are when it was checked.

Firebug:
>>> console.log(blnBasement)
ReferenceError: blnBasement is not defined { message="blnBasement is not defined", more...}

>>> console.log(blnBasement.value)
ReferenceError: blnBasement is not defined { message="blnBasement is not defined", more...}

>>> console.log(blnBasement)
ReferenceError: blnBasement is not defined { message="blnBasement is not defined", more...}

>>> console.log(blnBasement.value)
ReferenceError: blnBasement is not defined { message="blnBasement is not defined", more...}
Chrome Developer:
console.log(blnBasement)
<input type=​"checkbox" name=​"blnBasement" id=​"blnBasement" class=​"smallfield" onclick=​"uValue(this.value,'Basement')​">​
undefined

console.log(blnBasement.value)
undefined

console.log(blnBasement)
<input type=​"checkbox" name=​"blnBasement" id=​"blnBasement" class=​"smallfield" onclick=​"uValue(this.value,'Basement')​">​
undefined

console.log(blnBasement.value)
on
undefined
As you can see, Chrome realises the box is ticked. Firefox doesn't.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Webkit vs Others - Javascript Checkboxes

Post by pickle »

It looks like Firefox doesn't even know the element exists. Do a console.dir() of the element right after you select it to see if both browsers at least agree to that point.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
timWebUK
Forum Contributor
Posts: 239
Joined: Thu Oct 29, 2009 6:48 am
Location: UK

Re: Webkit vs Others - Javascript Checkboxes

Post by timWebUK »

Chrome Developer:
console.dir(blnBasement)
HTMLInputElement
undefined
HTMLInputElement provides a drop down list of all the possible attributes and settings and styles for it.

Firebug:
>>> console.dir(blnBasement)
ReferenceError: blnBasement is not defined { message="blnBasement is not defined", more...}
Firebug saying the same again. Can't understand why it wouldn't recognise it. The tick box is within the <form> tags, my code is completely compliant to the latest Strict XHTML standards.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Webkit vs Others - Javascript Checkboxes

Post by pickle »

what is this blnBasement element? It's not in the code you posted in your initial post.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
timWebUK
Forum Contributor
Posts: 239
Joined: Thu Oct 29, 2009 6:48 am
Location: UK

Re: Webkit vs Others - Javascript Checkboxes

Post by timWebUK »

Oops sorry. I pasted the wrong code at the start, but it is essentially the same:

Code: Select all

function uValue(checked,floor)
{
	//var blnCheckbox = checked;
	var element = document.getElementById('flt' + floor + 'FloorUValue');
	var element2 = document.getElementById('int' + floor + 'Area');
	var element3 = document.getElementById('int' + floor + 'AvgStorey');
	
	if(checked=="on")
	{
		element.value = "0.25";
	}
	else
	{
		element.value = "";
		element2.value = "";
		element3.value = "";
	}	
	return true;
}
And the calling code:

Code: Select all

<input type="checkbox" name="blnBasement" id="blnBasement" class="smallfield" onclick="uValue(this.value,'Basement');" />
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Webkit vs Others - Javascript Checkboxes

Post by Weirdan »

use this.checked instead of this.value
User avatar
timWebUK
Forum Contributor
Posts: 239
Joined: Thu Oct 29, 2009 6:48 am
Location: UK

Re: Webkit vs Others - Javascript Checkboxes

Post by timWebUK »

Done that, behaves a bit better in the console now. Modified my Javascript to look for 'true' instead of 'on' as well. But Firefox doesn't work at all now, it doesn't even add the value to the text field.

EDIT:

False alarm, after trying it in all the other browsers and it worked, I realised Firefox had cached the page, after a forced refresh it is working. Thanks guys.
Post Reply