Using an HTML button to call a JavaScript function

Question

I am trying to use an HTML button to call a JavaScript function   Here s the code    lt input type  button  value  Capacity Chart  onclick  CapacityChart     gt    It doesn t seem to work correctly though  Is there a better way to do this   Here is the link http   projectpath ideapeoplesite com bendel toolscalculators html click on the capacity tab in the bottom left section  The button should generate an alert if the values are not changed and should produce a chart if you enter values

User · Answer

Your HTML and the way you call the function from the button look correct.

The problem appears to be in the CapacityCount function. I'm getting this error in my console on Firefox 3.5: "document.all is undefined" on line 759 of bendelcorp.js.

Edit:

Looks like document.all is an IE-only thing and is a nonstandard way of accessing the DOM. If you use document.getElementById(), it should probably work. Example: document.getElementById("RUnits").value instead of document.all.Capacity.RUnits.value

User · Answer

One major problem you have is that you re using browser sniffing for no good reason   if navigator appName     Netscape               vesdiameter    document forms  Volume   elements  VesDiameter   value           more stuff snipped           else             vesdiameter    eval document all Volume VesDiameter value            more stuff snipped         I m on Chrome  so navigator appName won t be Netscape  Does Chrome support document all  Maybe  but then again maybe not  And what about other browsers   The version of the code on the Netscape branch should work on any browser right the way back to Netscape Navigator 2 from 1996  so you should probably just stick with that    except that it won t work  or isn t guaranteed to work  because you haven t specified a name attribute on the input elements  so they won t be added to the form s elements array as named elements    lt input type  text  id  VesDiameter  value  0  size  10  onKeyUp  CalcVolume     gt    Either give them a name and use the elements array  or  better  use  var vesdiameter   document getElementById  VesDiameter   value    which will work on all modern browsers - no branching necessary  Just to be on the safe side  replace that sniffing for a browser version greater than or equal to 4 with a check for getElementById support   if  document getElementById       NB  no brackets  we re testing for existence of the method  not executing it        do stuff        You probably want to validate your input as well  something like  var vesdiameter   parseFloat document getElementById  VesDiameter   value   if  isNaN vesdiameter         alert  Diameter should be numeric        return      would help

User · Answer

silly way   onclick  javascript CapacityChart       You should read about discrete javascript  and use a frameworks bind method to bind callbacks to dom events

User · Answer

There are a few ways to handle events with HTML DOM   There s no real right or wrong way but different ways are useful in different situations     1  There s defining it in the HTML    lt input id  clickMe  type  button  value  clickme  onclick  doFunction       gt    2  There s adding it to the DOM property for the event in Javascript     - Using a function pointer  document getElementById  clickMe   onclick   doFunction     - Using an anonymous function  document getElementById  clickMe   onclick   function      alert  hello          3  And there s attaching a function to the event handler using Javascript   var el   document getElementById  clickMe    if  el addEventListener      el addEventListener  click   doFunction  false   else if  el attachEvent      el attachEvent  onclick   doFunction     Both the second and third methods allow for inline anonymous functions and both must be declared after the element has been parsed from the document   The first method isn t valid XHTML because the onclick attribute isn t in the XHTML specification   The 1st and 2nd methods are mutually exclusive  meaning using one  the 2nd  will override the other  the 1st    The 3rd method will allow you to attach as many functions as you like to the same event handler  even if the 1st or 2nd method has been used too   Most likely  the problem lies somewhere in your CapacityChart   function   After visiting your link and running your script  the CapacityChart   function runs and the two popups are opened  one is closed as per the script    Where you have the following line   CapacityWindow document write s     Try the following instead   CapacityWindow document open  text html    CapacityWindow document write s   CapacityWindow document close      EDIT When I saw your code I thought you were writing it specifically for IE   As others have mentioned you will need to replace references to document all with document getElementById   However  you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion   Once it s working in IE it will be easier to tell if it s working in other browsers whilst you re updating the code

User · Answer

SIMPLE ANSWER       onclick  functionName ID value     Where ID is the ID of the input field

User · Answer

I would say it would be better to add the javascript in an un-obtrusive manner     if using jQuery you could do something like    lt script gt      document  ready function            MyButton   click function           CapacityChart                   lt  script gt    lt input type  button  value  Capacity Chart  id  MyButton   gt

User · Answer

This looks correct  I guess you defined your function either with a different name or in a context which isn t visible to the button  Please add some code

User · Answer

Just so you know  the semicolon    is not supposed to be there in the button when you call the function    So it should just look like this  onclick  CapacityChart     then it all should work

User · Answer

Your code is failing on this line    var RUnits   Math abs document all Capacity RUnits value     i tried stepping though it with firebug and it fails there   that should help you figure out the problem   you have jquery referenced  you might as well use it in all these functions  it ll clean up your code significantly

User · Answer

I have an intelligent function-call-backing button code    lt br gt   lt p id  demo  gt  lt  p gt  lt h2 gt Intelligent Button  lt  h2 gt  lt i gt Note  Try pressing a key after clicking  lt  i gt  lt br gt   lt button id  button  shiftKey  getElementById  button   innerHTML   You re pressing shift  aren t you     onscroll  getElementById  button   innerHTML   Don t Leave me     onkeydown  getElementById  button   innerHTML   Why are you pressing keys     onmouseout  getElementById  button   innerHTML   Whatever  it is gone   maybe    onmouseover  getElementById  button   innerHTML   Something Is Hovering Over Me   again    onclick  getElementById  button   innerHTML   I was clicked  I think    gt Ahhhh lt  button gt

[javascript] Using an HTML button to call a JavaScript function

Examples related to javascript

Examples related to html