Page 1 of 1
[SOLVED] Webkit vs Others - Javascript Checkboxes
Posted: Wed Aug 25, 2010 6:45 am
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?
Re: Webkit vs Others - Javascript Checkboxes
Posted: Wed Aug 25, 2010 7:30 am
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).
Re: Webkit vs Others - Javascript Checkboxes
Posted: Wed Aug 25, 2010 7:36 am
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:
Re: Webkit vs Others - Javascript Checkboxes
Posted: Wed Aug 25, 2010 10:05 am
by pickle
console.log() what the value of checkbox is
Re: Webkit vs Others - Javascript Checkboxes
Posted: Thu Aug 26, 2010 5:33 am
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.
Re: Webkit vs Others - Javascript Checkboxes
Posted: Thu Aug 26, 2010 9:42 am
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.
Re: Webkit vs Others - Javascript Checkboxes
Posted: Thu Aug 26, 2010 11:02 am
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.
Re: Webkit vs Others - Javascript Checkboxes
Posted: Thu Aug 26, 2010 11:13 am
by pickle
what is this blnBasement element? It's not in the code you posted in your initial post.
Re: Webkit vs Others - Javascript Checkboxes
Posted: Fri Aug 27, 2010 3:04 am
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');" />
Re: Webkit vs Others - Javascript Checkboxes
Posted: Fri Aug 27, 2010 6:21 am
by Weirdan
use this.checked instead of this.value
Re: Webkit vs Others - Javascript Checkboxes
Posted: Fri Aug 27, 2010 7:50 am
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.