如何通过HTML按钮单击链接外部JS函数
[英]How to link external JS function with HTML button click
问题描述
I just strated with cordova project. 
我刚刚完成了cordova项目。 In my HTML there is a button and i want to add click event for that. 在我的HTML中有一个按钮，我想为此添加click事件。 Click event function is written in external JS file. Click事件函数是在外部JS文件中编写的。 But unfortunately the function is not getting called. 但是不幸的是没有调用该函数。 Given below is my HTML and JS files. 以下是我的HTML和JS文件。 please help me 请帮我
index.html 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 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);
}
}; };
3 个解决方案
解决方案1
3 已采纳 2014-07-11 09:07:23
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. 另外，我还没有使用过Cordova，所以这里我可能会丢失一些东西，但是， submitBtnFunc似乎在存储在变量app中的对象中，因此您需要指定app.submitBtnFunc ，而且您也不会传递值用于id参数。
Try this for the button instead: 尝试使用此按钮：
<input type="button" value="submit" id="login_submit" onclick="app.submitBtnFunc('idvalue');"/>
解决方案2
1 2014-07-11 09:03:33
Function submitBtnFunc has to be out of var app initialization, or has to be declared as var app method. 函数submitBtnFunc必须在var app初始化之外，或者必须声明为var app方法。
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: 作为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);
}
};
and 和
<input type="button" value="submit" id="login_submit" onclick="app.submitBtnFunc('login_submit');"/>
解决方案3
0 2014-07-11 09:07:12
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: 然后将其绑定到按钮上的onclick事件，如下所示：
<input type="button" value="submit" id="login_submit" onclick="app.submitBtnFunc('someId');"/>
Welcome ;) 欢迎;）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.