如何链接外部JS函数与HTML按钮点击

How to link external JS function with HTML button click

本文关键字：函数 HTML 按钮 JS 外部 何链接 链接      更新时间：2023-09-26

我刚刚策划了cordova项目。在我的HTML有一个按钮，我想添加点击事件。点击事件函数写在外部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);
 }

};

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

改变:

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中的对象中，所以你需要指定app.submitBtnFunc，你也没有通过id参数的值。

试试这个按钮:

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

函数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');"/>

可以在文字对象中声明一个函数:

   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');"/>

欢迎;)

相关文章：