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

Discussion in 'Javascript' started by W.Sh, Feb 11, 2006.

  1. W.Sh

    W.Sh Guest

    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
     
    W.Sh, Feb 11, 2006
    #1
    1. Advertising

  2. W.Sh

    Lee Guest

    W.Sh said:
    >
    >Hello Everyone!
    >
    >I'm having some issues with javascript that I can't seem to resolve...


    > if (document.getElementsByName("myCheck" + index).checked=true)


    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)
     
    Lee, Feb 11, 2006
    #2
    1. Advertising

  3. W.Sh

    W.Sh Guest

    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.Sh, Feb 11, 2006
    #3
  4. W.Sh

    W.Sh Guest

    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
     
    W.Sh, Feb 11, 2006
    #4
  5. 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
     
    Luke Matuszewski, Feb 11, 2006
    #5
  6. 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
     
    Luke Matuszewski, Feb 11, 2006
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tiewknvc9
    Replies:
    1
    Views:
    304
  2. Tom Johnson
    Replies:
    4
    Views:
    392
    red floyd
    Aug 15, 2003
  3. Zilla
    Replies:
    12
    Views:
    497
    Zilla
    Oct 23, 2007
  4. Guilherme Polo

    Re: seemingly simple list indexing problem

    Guilherme Polo, Jul 28, 2008, in forum: Python
    Replies:
    3
    Views:
    283
    John Krukoff
    Jul 30, 2008
  5. ThePacific
    Replies:
    0
    Views:
    376
    ThePacific
    Sep 26, 2012
Loading...

Share This Page