why doesn't my button click event fire?

Discussion in 'Javascript' started by Eric, Nov 16, 2006.

  1. Eric

    Eric Guest

    I'm new to JavaScript and I wrote this code to play with. Oddly, if I
    enter text in a box and then press the button, I only get the onChange
    event for the text box and not the button's onclick event. But if I
    press the button without entering text first, the button click event
    does work. What's up?

    <html>
    <body>
    <h3>Events on Buttons and Text Boxes</h3>

    <input id="myTextBox1" type="text" onChange="doChange1()" /> <br />
    <input id="myTextBox2" type="text" onChange="doChange2()" /> <br />

    <input id="myButton" type="button" onclick="doClick()" value="Click me"
    />

    <script type="text/javascript">
    function doChange1(e)
    {
    var val = document.getElementById("myTextBox1").value;
    alert("You typed: " + val);
    }

    function doChange2(e)
    {
    var val = document.getElementById("myTextBox2").value;
    alert("You typed: " + val);
    }

    function doClick(e)
    {
    var _num = prompt("Enter a number", "100");
    alert("You typed: " + _num); // number converted to string
    automatically
    }
    </script>

    </body>
    </html>
     
    Eric, Nov 16, 2006
    #1
    1. Advertising

  2. Eric

    ASM Guest

    Eric a écrit :
    > I'm new to JavaScript and I wrote this code to play with. Oddly, if I
    > enter text in a box and then press the button, I only get the onChange
    > event for the text box and not the button's onclick event. But if I
    > press the button without entering text first, the button click event
    > does work. What's up?


    You have to let time to time :

    function doChange2(e)
    {
    var val = document.getElementById("myTextBox2").value;
    setTimeout(function(){alert("You typed: " + val);},200);
    }

    fine for me
    but could need a longer timer than 200 miliseconds
    (depends of processor's capacity ?)

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Nov 16, 2006
    #2
    1. Advertising

  3. Eric

    Eric Guest

    ASM wrote:
    > Eric a écrit :
    > > I'm new to JavaScript and I wrote this code to play with. Oddly, if I
    > > enter text in a box and then press the button, I only get the onChange
    > > event for the text box and not the button's onclick event. But if I
    > > press the button without entering text first, the button click event
    > > does work. What's up?

    >
    > You have to let time to time :
    >
    > function doChange2(e)
    > {
    > var val = document.getElementById("myTextBox2").value;
    > setTimeout(function(){alert("You typed: " + val);},200);
    > }


    Very good - this fixed it on IE. It seems it did work OK on FireFox
    without this but I wasn't able to test it on FireFox earlier.

    But why do we need a time delay/timeout here? This doesn't make sense
    to me. I could understand a delay if we were executing dynamically
    constucted code, or code that wasn't fully downloaded to the browser,
    but this is a simple page?

    Eric
     
    Eric, Nov 17, 2006
    #3
  4. Eric

    Lee Guest

    Eric said:
    >
    >I'm new to JavaScript and I wrote this code to play with. Oddly, if I
    >enter text in a box and then press the button, I only get the onChange
    >event for the text box and not the button's onclick event. But if I
    >press the button without entering text first, the button click event
    >does work. What's up?


    This is why alert() isn't a good way to play with event handlers.

    Think about when the onchange event of a text input field happens --
    when the mouse is clicked outside the text field or when the input cursor is
    tabbed out.

    So if you enter text in one of your fields and then click the button, what event
    fires first?


    --
     
    Lee, Nov 17, 2006
    #4
  5. Eric

    Eric Guest

    David Golightly wrote:
    > Eric wrote:
    > > I'm new to JavaScript and I wrote this code to play with. Oddly, if I
    > > enter text in a box and then press the button, I only get the onChange
    > > event for the text box and not the button's onclick event.


    > 1. I don't see any behavior here that's unexpected. I tested your code
    > on IE and Firefox and the button click handler gets fired every time I
    > click it.


    It didn't work for me on IE6 or IE7 on WinXP SP2, but it did work on
    FireFox when I tested it later. I only had a problem if I entered text
    before pressing the button. The timeout suggested by the other poster
    fixed it, but I really can't see why?

    > 2. Why do you duplicate the change handler? Much better would be:


    > <input id="myTextBox1" type="text" onChange="doChange(this)" /> <br />
    > <input id="myTextBox2" type="text" onChange="doChange(this)" /> <br />


    This is indeed better! I didn't know that "this" could be used to pass
    the name of the control, but it does make perfect sense that it would.
    This could be a big savings in code while making it more maintainable.

    > Of course, in that case, your handler doesn't get an Event object
    > passed to it. But you weren't using it anyway. Pretty soon you'll
    > need to learn about Event objects and unobtrusive event handlers, but
    > that's too involved for this post. Check out
    > http://www.quirksmode.org/js/introevents.html for an overview.


    Cool site - I may buy that book. He has a clean presentation that is
    easy to follow.

    Speaking of quirks mode (we weren't really, but I saw it in the URL
    above), I've been reading about this but I can't understand how to be
    compatible with both old browsers (quirks mode) and new browsers (via
    the use of a DOCTYPE) without sprinkling my code with version checks
    anyway. If I specify that I'm XHTML complaint, I still have to test for
    old browsers and adjust my code accordingly. So is a DOCTYPE really
    helping me if I have to use ugly browser testing code anyway?

    > 3. Your script tags should really go inside your head tags. Actually,
    > your scripts should really go in a separate file. For a simple example
    > like this it isn't a big deal, but for a larger project it's pretty
    > important to keep track of your code in this way. Once you start
    > peppering <script> tags in the body of your HTML you quickly lose the
    > ability to keep track of what's where.


    Thanks for the advice. I understand that script in the head will finish
    loading and be available before the UI renders, thereby eliminating
    some possible "object expected" errors. And putting it in a separate
    file may also allow the browser to cache it.

    Right now I'm just making simple test pages so I can learn from it.
    I'll do my best to follow the "best practices" in code I deploy.

    > 4. In your onClick handler, you should understand that _num is always a
    > string (whether it contains digits or not), it's never a number. If
    > you wanted an actual number you could do math with, you need to call
    > parseInt(_num).


    Thanks for this clarification, also. I'm not used to a typeless
    language that really does have types, and I assumed the conversion
    would always be automatic. But in my code I wasn't trying to do math on
    it, anyway. I guess if I tried to add 1 it would have blown up unless I
    had the parseInt.

    Eric
     
    Eric, Nov 17, 2006
    #5
  6. Eric

    ASM Guest

    Eric a écrit :
    >
    > But why do we need a time delay/timeout here?


    Because you can fight the processor and its speed :)

    You leave the text field and change fires before you can reach the
    button, your eventual click on this last one doesn't take effect : the
    browser is already at work krumbling its mind to display the alert.

    During displaying alert box all JS is stopped.

    Delay perhaps could be shorter if instead to call an alert you innerHTML
    message in some P or span.

    What you can also do in your text fields is :
    onchange="alert('somenthing changed); doChange1(); myButton.click();"
    (don't forget to name your button which has only an id)

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Nov 17, 2006
    #6
  7. Eric

    ASM Guest

    Eric a écrit :
    > David Golightly wrote:
    >> Eric wrote:
    >> 4. In your onClick handler, you should understand that _num is always a
    >> string (whether it contains digits or not), it's never a number. If
    >> you wanted an actual number you could do math with, you need to call
    >> parseInt(_num).

    >
    > Thanks for this clarification, also. I'm not used to a typeless
    > language that really does have types, and I assumed the conversion
    > would always be automatic. But in my code I wasn't trying to do math on
    > it, anyway. I guess if I tried to add 1 it would have blown up unless I
    > had the parseInt.


    Say a number in a text field :
    var n = document.myForm.myTextField.value; // n is text
    n = n*1; // number
    n = +n; // number
    n = Number(n); // number
    n = parseInt(n); // number
    n = +n + ''; // text
    n = Number(n)+''; // text

    document.myForm.myTextField.value++; // increase this value by step of 1
    // if value was a number

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Nov 17, 2006
    #7
  8. Eric

    Eric Guest

    David Golightly wrote:

    > 3. Your script tags should really go inside your head tags.


    I just tried this and it also fixed the problem with IE.

    Maybe it's a good rule of thumb to put all the script code in the head,
    or at least in the body before it's referenced by any UI objects.

    Eric
     
    Eric, Nov 17, 2006
    #8
  9. In message <>, Thu,
    16 Nov 2006 18:26:26, David Golightly <> writes
    >
    >Not exactly. In JS the following is true:
    >
    >'1' + '1' == '1' + 1 == '11'


    Actually, executed as JS, that gives false .

    >The + operator is used to concatenate strings, and anything that's not
    >a string, when added to a string, is automatically converted rather
    >than throwing an error.


    It does, however, convert a Boolean to a Number, and a Function to NaN.

    It's a good idea to read the newsgroup and its FAQ. See below.

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
    <URL:http://www.jibbering.com/faq/> Old RC FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr J R Stockton, Nov 17, 2006
    #9
  10. Eric

    Evertjan. Guest

    Dr J R Stockton wrote on 18 nov 2006 in comp.lang.javascript:

    >>'1' + '1' == '1' + 1 == '11'

    >
    > Actually, executed as JS, that gives false .
    >


    True, it does.

    Try:

    alert( '1' + '1' == '1' + 1 == '11' ) // false, because:

    alert( ('1' + '1') == ('1' + 1) == '11' ) // false

    alert( '1' + ('1' == '1') + (1 == '11') ) // 1truefalse

    // btw:

    alert( '1' + 1 === '11' ) // true

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Nov 18, 2006
    #10
  11. In message <Xns987F76D57645eejj99@194.109.133.242>, Sat, 18 Nov 2006
    10:40:53, Evertjan. <> writes
    >Try:
    >
    >alert( '1' + '1' == '1' + 1 == '11' ) // false, because:


    I can try it without the alert( or the ) . I just copy from one
    window, paste into another, and press "Eval".

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
    <URL:http://www.jibbering.com/faq/> Old RC FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr J R Stockton, Nov 18, 2006
    #11
  12. Eric

    Evertjan. Guest

    Dr J R Stockton wrote on 18 nov 2006 in comp.lang.javascript:

    > I can try it without the alert( or the ) . I just copy from one
    > window, paste into another, and press "Eval".


    I have heard one could press charges, but
    how the (d)evil does one press eval?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Nov 18, 2006
    #12
  13. Eric

    Evertjan. Guest

    David Golightly wrote on 19 nov 2006 in comp.lang.javascript:

    > that's how.


    That's how what, David?

    Please quote on usenet, this is not email.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Nov 19, 2006
    #13
  14. In message <Xns98806B48CAC9eejj99@194.109.133.242>, Sat, 18 Nov 2006
    23:39:31, Evertjan. <> writes
    >Dr J R Stockton wrote on 18 nov 2006 in comp.lang.javascript:
    >
    >> I can try it without the alert( or the ) . I just copy from one
    >> window, paste into another, and press "Eval".

    >
    >I have heard one could press charges, but
    >how the (d)evil does one press eval?


    "Eval", not "eval".

    The window to be copied into can be left open, and at least partly
    visible on the screen, and "Eval" is written on the first button. One
    moves the mouse so that ... .

    The window in question is one showing a local copy of my Web page
    <URL:http://www.merlyn.demon.co.uk/js-quick.htm>.

    To see how it works, get that page, press "Demo" 6N+5 times then press
    Eval (NewW only works with some Demo numbers). Demos 2, 3, & 6 are
    better examples of normal use.

    But read the rest of the page too.

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
    <URL:http://www.jibbering.com/faq/> Old RC FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr J R Stockton, Nov 19, 2006
    #14
    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. Amy
    Replies:
    0
    Views:
    993
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,000
    Smokey Grindel
    Dec 2, 2006
  3. Nathan Sokalski
    Replies:
    0
    Views:
    1,073
    Nathan Sokalski
    Jan 15, 2009
  4. MU
    Replies:
    0
    Views:
    565
  5. Andy B.
    Replies:
    0
    Views:
    886
    Andy B.
    Nov 25, 2009
Loading...

Share This Page