How to link external JS function with HTML button click

Question

I just strated with cordova project. In my HTML there is a button and i want to add click event for that. Click event function is written in external JS file. But unfortunately the function is not getting called. Given below is my HTML and JS files. please help me

index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript">
  app.initialize();
  </script>
    <div>
     <h1 id="login">Login</h1>
     <div class="label_edit">
       <div  type="label"; id = "username_lbl"  class="label">USERNAME
       <input type="text"; id = "username_edit" class="edit" />
       </div> 

     </div>
     <div class="label_edit">
       <div  type="label"; id = "password_lbl"  class="label">PASSWORD
       <input type="password"; id = "password_edit"  class="edit"/>
       </div> 
     </div>
     <br/>
     <input type="button" value="submit" id="login_submit" onclick="submitBtnFunc();"/>
    </div>

</body>

index.js

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
    app.submitBtnFunc(id);
},
function submitBtnFunc(id)
{
  alert("user name is :");
  var username = document.getElementById("username_edit").value;
  alert(username);
 }

};

You are declaring the function submitBtnFunc in a wrong way — mehsen
– mehsen, Commented Jul 11, 2014 at 8:59

Grant Peters · Accepted Answer · 2014-07-11 09:07:23Z

3

First and foremost, your function declaration is wrong. You can't declare a member function like that.

Change:

function submitBtnFunc(id)
{
  alert("user name is :");
  var username = document.getElementById("username_edit").value;
  alert(username);
}

To:

submitBtnFunc: function(id)
{
  alert("user name is :");
  var username = document.getElementById("username_edit").value;
  alert(username);
}

Also, I haven't used Cordova, so I might be missing something here, but, the submitBtnFunc seems to be in the object stored in the variable app so you need to specify app.submitBtnFunc, also you aren't passing through a value for the id parameter.

Try this for the button instead:

 <input type="button" value="submit" id="login_submit" onclick="app.submitBtnFunc('idvalue');"/>

answered Jul 11, 2014 at 9:07

Grant Peters

7,8753 gold badges47 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Regent · Accepted Answer · 2014-07-11 09:09:25Z

Function submitBtnFunc has to be out of var app initialization, or has to be declared as var app method.

Out of initialization:

var app = {

        ...
        receivedElement.setAttribute('style', 'display:block;');
        console.log('Received Event: ' + id);
    }
};
function submitBtnFunc(id)
{
    alert("user name is :");
    var username = document.getElementById("username_edit").value;
    alert(username);
}

and

 <input type="button" value="submit" id="login_submit" onclick="submitBtnFunc('login_submit');"/>

As app method:

var app = {

        ...

        receivedElement.setAttribute('style', 'display:block;');
        console.log('Received Event: ' + id);
    },
    submitBtnFunc: function(id)
    {
        alert("user name is :");
        var username = document.getElementById("username_edit").value;
        alert(username);
    }
};

and

 <input type="button" value="submit" id="login_submit" onclick="app.submitBtnFunc('login_submit');"/>

mehsen · Accepted Answer · 2014-07-11 14:27:50Z

You can declare a function inside a literal object like this :

   var literalObject ={

        fun1 : function (){
          //here goes your implementation 
        },
        fun2 : function (){
          //here goes your implementation 
        },

    }

and you call it by

     literalObject.fun1();

In your case :

        var app ={
        ....
        ....
        ....
         , submitBtnFunc : function (id)
           {
         alert("user name is :");
         var username = document.getElementById("username_edit").value;
         alert(username);
          },
        ....
        ....
        ....
        }

and you bind it to onclick event on the button like this:

       <input type="button" value="submit" id="login_submit" onclick="app.submitBtnFunc('someId');"/>

Welcome ;)

Collectives™ on Stack Overflow

How to link external JS function with HTML button click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related