Question

我刚刚参加了cordova项目。在我的HTML中有一个按钮，我想为此添加click事件。 Click事件函数写在外部JS文件中。但不幸的是，这个功能没有被调用。下面给出的是我的HTML和JS文件。请帮帮我

的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);
 }

};

Answer 1

首先，你的函数声明是错误的。你不能声明这样的成员函数。

变化：

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

要：

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

另外，我没有使用过Cordova，所以我可能会在这里遗漏一些东西，但submitBtnFunc似乎存在于变量app中的对象中，所以你需要指定{{ 1}}，您也没有通过app.submitBtnFunc参数的值。

请尝试使用此按钮：

id

Answer 2

函数submitBtnFunc必须超出var app初始化，或者必须声明为var app方法。

退出初始化：

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);
}

和

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

作为app方法：

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);
    }
};

和

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

Answer 3

您可以在文字对象中声明一个函数，如下所示：

   var literalObject ={

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

    }

你可以通过

来调用它

     literalObject.fun1();

在你的情况下：

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

然后将它绑定到按钮上的onclick事件，如下所示：

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

欢迎;）

如何链接外部JS功能与HTML按钮单击

3 个答案: