SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question onchange event will not fire

    HTML Code:
    <html>
    <head>
    <script type="application/ecmascript">
    function raise(){document.getElementById("btcount").value=document.getElementById("btcount").value*1+1;}
    function update(){document.getElementById("result").innerHTML=document.getElementById("btcount").value;}
    function init(){document.getElementById("bt").addEventListener("click", raise, false);    document.getElementById("btcount").addEventListener("change", update, false);}
    addEventListener("load", init, false);
    </script>
    </head>
    <body>
    <input id="bt" type="button" value="test" /><input type="text" id="btcount" value="0" /><p id="result"></p>
    </body>
    </html>
    Why does the change event not fire?

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,048
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    It works for me.

    When I click on the "test" button, the value in the text input increments.

    When I change the value of the text input, the value appears below it.

    I'm guessing you want the raise function to trigger a change event?

  3. #3
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly, the raise function changes the value of the text-input, so I would expect the chang event to be triggered.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,048
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    I guess you could have raise() call update() or have it explicitly fire a change event. As for understanding the "why not?", maybe its a "bubble up" vs. "bubble down" thing?

  5. #5
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    certainly not a bubble up/down thing; and I am currently solving it by calling update.
    The reason it does not work is indeed my main intrest.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by momos View Post
    certainly not a bubble up/down thing; and I am currently solving it by calling update.
    The reason it does not work is indeed my main intrest.
    The reason that the change event doesn't fire on a scripted update to the field, is that the change event only automatically fires on user interaction.

    By definition from: http://www.w3.org/TR/html4/interact/scripts.html
    The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus.
    I believe that some web browsers used to trigger the onchange event when a script made a change to an element, but if that onchange triggered another change to the same element, endless loops were easy to get in to, and hard to get out of.

    If you instead use the standard event declarations for the elements:

    Code javascript:
    document.getElementById("bt").onclick = raise;
    document.getElementById("btcount").onchange = update;

    you can then trigger the onchange event once your update has been made:

    Code javascript:
    function raise() {
        var btcount = document.getElementById("btcount");
        btcount.value = btcount.value * 1 + 1;
        btcount.onchange();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation Paul.
    I'm going for the eventlistener approach thouhg, so I can have multiple functions triggered by one event if necessary.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by momos View Post
    Thanks for the explanation Paul.
    I'm going for the eventlistener approach thouhg, so I can have multiple functions triggered by one event if necessary.
    That's the problem with using the eventlistener technique. Web browsers don't have as much access to it as they do with the standard event techniques, so you'll need to double-up on the calls to the update function while you continue to use eventlistener.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best solution for me, would be for the W3C to review their change event definition;-)


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •