CODEWITHSUNDEEP
javascripthtmldom-events
GibboK
GibboK

Reputation: 73918

How to call some JavaScript from an HTML Buttons

I'm new to JavaScript. I have an HTML file with a button, I would need to call the following JS when a button is clicked. Any idea how to do it <input type="submit" value="Get Push Token" />?

Please provide me a sample of code.

PushToken.getToken(     
                     ["getToken"] ,           
                     function(token) {
                              global.token = token; 
                     },
                     function(error) {
                              console.log("Error : \r\n"+error);      
                     }
          );

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name = "format-detection" content = "telephone=no"/>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello Cordova</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova™</h1>
            <div id="deviceready">
                <p class="status pending blink">Connecting to Device</p>
                <p class="status complete blink hide">Device is Ready</p>
                <p>Click here to get the Token<input type="submit" value="Get Push Token" />
            </div>
        </div>
        <script type="text/javascript" src="cordova-2.0.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/PushToken.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Upvotes: 1

Views: 384

Answers (3)

jbabey
jbabey

Reputation: 46647

Put the code inside an event handling function, and then call that function in the onclick of the button.

HTML: 

/* you probably want button, not submit, and it should have an ID */
<input type="button" id="someID" value="Get Push Token" />

JS:

document.getElementById('someID').onclick = function () {
    // whatever you want to do here
};

Note that there are other ways to bind event handlers, but this is considered the best practice (keep javascript and HTML separated)

Related question: JavasScript event handling best practice?

Upvotes: 0

Oriol
Oriol

Reputation: 288100

HTML:

<input type="submit" value="Get Push Token" id="getPushToken" />

JavaScript:

document.getElementById('getPushToken').onclick=function(){
      PushToken.getToken(     
                 ["getToken"] ,           
                 function(token) {
                          global.token = token; 
                 },
                 function(error) {
                          console.log("Error : \r\n"+error);      
                 }
      );
}

Anyway you have an input with type="submit", but you haven't any form, that's a bit nonsense.

If you just want a button, use type="button". If you want to submit a form, create a form which contains that input and whose id is, for example, myform. Then,

document.getElementById('myform').onsubmit=function(){
      PushToken.getToken(     
                 ["getToken"] ,           
                 function(token) {
                          global.token = token; 
                 },
                 function(error) {
                          console.log("Error : \r\n"+error);      
                 }
      );
}
...

Upvotes: 1

ForbesLindesay
ForbesLindesay

Reputation: 10712

Without Using jQuery

In a simple component or application, you wouldn't want to require the entire jQuery library, so the simplest way to do it would be like this:

HTML:

<input type="submit" value="Get Push Token" id="getPushToken" />

JavaScript:

document.getElementById('getPushToken').onclick=function(){
      PushToken.getToken(     
                 ["getToken"] ,           
                 function(token) {
                          global.token = token; 
                 },
                 function(error) {
                          console.log("Error : \r\n"+error);      
                 }
      );
}

Using jQuery

If you're building a complex application, there's a good chance you'll be wanting jQuery for something else, in which case you may as well do it like this:

HTML:

<input type="submit" value="Get Push Token" id="getPushToken" />

JavaScript:

$('#getPushToken').click(function(){
      PushToken.getToken(     
                 ["getToken"] ,           
                 function(token) {
                          global.token = token; 
                 },
                 function(error) {
                          console.log("Error : \r\n"+error);      
                 }
      );
});

Understanding what's going on

In either case, the key point is that you wrap the code you want to execute in a function, and set it as the handler of the click event for that button. The button will then cause the function to be called.

Using the correct HTML

If the button is not within a form, you should probably use:

<button id="getPushToken">Get Push Token</button>

for the html instead, the JavaScript would be exactly the same.

Upvotes: 3

Related Questions