473,385 Members | 1,357 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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

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

Feb 11 '06 #1
5 3287
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...

Feb 11 '06 #2
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

Feb 11 '06 #3
"W.Sh" <ro***********@gmail.com> writes:
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.getElementsByName returns a NodeList. While some of its
elements might have a "checked" property, the list itself does not.
Since you are reading a non-existing property, you get the value
"undefined" back. Converting that to a boolean for the "if" condition
gives "false".

If you know that there is exactly one element with that name, you can
write:
document.getElementsByName("myCheck" + index)[0].checked
{
document.getElementById("mySpan" + index).innerHTML = "True"
}
else
{
document.getElementById("mySpan" + index).innerHTML = "False"
}


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";

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Feb 11 '06 #4

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";


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

Feb 11 '06 #5
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";


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

Feb 11 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

28
by: rbt | last post by:
Either I'm crazy and I'm missing the obvious here or there is something wrong with this code. Element 5 of this list says it doesn't contain the string 255, when that's *ALL* it contains... why...
6
by: Pete | last post by:
Hello everybody -- Forgive my multi-posting my question. I posted first to ciwah, but I learned that ciwas is the better group for this CSS question. The problem has me stopped. The page: ...
3
by: David Thomas | last post by:
Hi, I've written a simple script to test the current date and perform an action depending on the result. The problem is, the date displays correctly as a complete date in an alert box but when I...
4
by: down_w/spam | last post by:
Hi all, I've done some research on this issue and am looking to you for further information on why IE still does a server look-up of a rollover image, even if the image has been preloaded and/or...
1
by: Pete | last post by:
Hello everybody -- The problem has me stopped. The page: http://www.key-horse.com/fftst.html is rendered completely differently by Firefox 1.0 and IE 6.0. The code seems to me perfectly...
0
by: William Wisnieski | last post by:
Hello Everyone: I'm having a very strange problem occurring with my Access 2000 database. I call it the "mystery record." Here's the story: I have a query by form that returns a record set...
6
by: Chris Ashley | last post by:
I have been tearing my hair out (or indeed, what's left of it) all day with this one. I'm not sure if it's a .NET issue, a server issue or anything else and would appreciate any guidance. ...
2
by: David | last post by:
Hi, I have the following SQL string, but cannot get it working: strSQL = "SELECT * FROM where . = '" & !!.! & "' and . = #" & !!.! & "#"
12
by: mantrid | last post by:
Can anyone see why this simple script doesnt make the element visible? It starts of as hidden but will not show when the button is clicked. This has worked for me before but I cannot see what is...
6
Nepomuk
by: Nepomuk | last post by:
Hi everyone! Until now, I've almost only programmed in Java and am now learning C++ (using Bjarne Stroustrup's book). Now, I wanted to test one of the examples from the book, but somehow it doesn't...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.