Seemingly Simple issue, and yet a mystery! Please help...

W

W.Sh

Hello Everyone!

I'm having some issues with javascript that I can't seem to resolve...
Basically, I have a very simple code that's supposed to change the
innerHTML of a span element whenever I click on a checkbox. The
innerHTML reads "True" if the checkbox is checked, and "False" if the
checkbox is unchecked.

Now, the problem is that it only works when I check the checkbox, but
when I uncheck it nothing happens.

Here is a sample of the code I am using to do this:

....
<head>
<script type="text/javascript">
function CheckCheckbox(index)
{
if (document.getElementsByName("myCheck" + index).checked=true)
{
document.getElementById("mySpan" + index).innerHTML = "True"
}
else
{
document.getElementById("mySpan" + index).innerHTML = "False"
}
}
</script>
</head>
....

....
<body>

<input type="checkbox" name="myCheck0" onclick="CheckCheckbox(0)"
/><span id="mySpan0"></span>

<input type="checkbox" name="myCheck1" onclick="CheckCheckbox(1)"
/><span id="mySpan1"></span>

<input type="checkbox" name="myCheck2" onclick="CheckCheckbox(2)"
/><span id="mySpan2"></span>

</body>
....

As you can see, this is very basic and should work flawlessly, but for
some reason it only seems to work half way. When I click on a checkbox
to uncheck it, nothing is happening.

Does anyone have any ideas as to why this is happening ( or... not
happening :D )?

Any input will be very appreciated!

Thanks in advance!
W.Sh
 
L

Lee

W.Sh said:
Hello Everyone!

I'm having some issues with javascript that I can't seem to resolve...
Click to expand...
if (document.getElementsByName("myCheck" + index).checked=true)
Click to expand...

That line doesn't test whether checked is true, it assigns the value
of true to the checked attribute. The equality test operator is "==".

Since there is no reason to compare a boolean expression to true,
simply use:

if (document.getElementsByName("myCheck" + index).checked)
 
W

W.Sh

Thanks for the input Lee, but that still hasn't solved the problem.

I changed it to:

function CheckCheckbox(index)
{
if (document.getElementsByName("myCheck" + index).checked)
{
document.getElementById("mySpan" + index).innerHTML = "True"
}
else
{
document.getElementById("mySpan" + index).innerHTML = "False"
}
}

Now whenever I check the checkbox, the innerHTML of the span element
changes to "False" instead of changing to "True" to indicate that the
checkbox is checked; and when I uncheck the checkbox, once again,
nothing happens. The innerHTML of the span element just gets stuck on
"False".

I tried a little test where I defined the checkbox element as "checked"
in advance, to see whether this was a problem that occured only when
the checkbox was unchecked, and I got the same results. So that's
definitely not the issue.

It seems that for some strange reason the code works only on the first
click, after which it no longer does anything.

Any ideas? This is so strange...
 
W

W.Sh

Oops! Nevermind! I have resolved the issue! :)

I changed: document.getElementsByName("myCheck" + index).checked
To: document.getElementById("myCheck" + index).checked

And now it works perfectly!

Apparently I had 2 problems.

The first one being the fact that I used:
document.getElementsByName("myCheck" + index).checked=true

Instead of just:
document.getElementsByName("myCheck" + index).checked

Thanks for pointing that out Lee!

And the second one being that I used "getElementsByName" instead of
"getElementById".

Thanks again!

W.Sh
 
L

Luke Matuszewski

Lasse Reichstein Nielsen napisal(a):
May I suggest a shorter way to express it:

var checked = document.getElementsByName("myCheck" + index)[0].checked;
var span = document.getElementsById("mySpan" + index);
span.innerHTML = checked ? "True" : "False";
Click to expand...

Using commonly known properties of host objects (which are also
checkbox'es) is suggested way of working with them, but there might be
a catches (which you might test on W.IE and FF when playing with
window.open(...) and testing in script in newly opened window the
window.opener.closed property... eg. for ('spying popup technique'
(executed onunload) which can test if user closed window or just walked
to another url)).
To avoid caches (which are created by slightly different
implementations of host objects) always use full comparisions eg.

var checked = document.getElementsByName("myCheck" +
index)[0].checked;
var span = document.getElementsById("mySpan" + index);

span.innerHTML = (checked==true) ? "True" : "False";

This will prevent some not obvious problems you might have in future.

B.R.
Luke Matuszewski
 
L

Luke Matuszewski

I think i have made an one mistake in prevous post... Here is
corrected:

Lasse Reichstein Nielsen napisal(a):
May I suggest a shorter way to express it:
var checked = document.getElementsByName("myCheck" + index)[0].checked;
var span = document.getElementsById("mySpan" + index);
span.innerHTML = checked ? "True" : "False";
Click to expand...

This example is good and nothing to be corrected in here. The reason
i wrote about "spying popup technique" is differences between FF and
IE, here is an example script fired from popup window opened 'onunload'
of opener window:

<html><head><script type="text/javascript">
function test() {
/* Internet Explorer based browsers do not nullify the
reference to opener window even if it is closed */
if(window.opener) { /* true for IE browsers / false for FF */
if(window.opener.closed==true) { /* IE-based browsers */
if( ! confirm("Are you still working in SETI project ?")) {
var img = new Image();
img.src = "url_to_invalide_session";
}
}
/* Gecko-based-browsers nullify the reference to opener window if it is
closed */
} else {
if( ! confirm("Are you still working in SETI project ?")) {
var img = new Image();
img.src = "url_to_invalide_session";
}
}
window.close();
}
setTimeout('test()',150); /* timeout needed for proper closing event of
opener window */
</script></head><body></body></html>

B.R.
Luke Matuszewski
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I dont get this. Please help me!! 2
Password confirmation issue 5
Help please 8
Please, help me. 1
I am trying to detect Which image id="" was clicked ? 22
Survey details won't go through using php, ajax, Mysql 0
Need help again please 19
How can I hide a div using an event listener on multiple checkboxes? 6

Members online

Total: 32 (members: 2, guests: 30)
Robots: 487

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top