Phonegap button click event
Question
I can't get the button to call my javascript function and I'm starting to run in circles. I'm not very experienced in this area and to me it looks like all the examples I've seen.
<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" />
<title>BONJA</title>
</head>
<body>
<div class="app">
<div class="wrapper">
<div class="content">
<div class="head">
<img src="res/logo/institucional.png" />
</div>
<div class="container">
<form>
<input type="button" value="Fazer Login" onclick="login()" class="button" id="loginClick" />
</form>
</div>
<div id="deviceready" class="blink">
<p class="event notConnected">Não conectado</p>
<p class="event connecting">conectando</p>
<p class="event connected">conectado</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
function login() {
//initialize login
var parentElement = document.getElementByID('deviceready');
var notConnectedElement = parentElement.querySelector('.notConnected');
var connectingElement = parentElement.querySelector('.connecting');
notConnectedElement.setAttribute('style', 'display:none;');
connectingElement.setAttribute('style', 'display:block;');
alert("Hello world!");
}
</script>
</body>
Im testing everything on the iPhone Simulator by the way.
Thanks for your help
2 answers
solution1
0 2014-04-03 17:23:50
There is a typo in the first line in login() with document.getElementById() and i have done some code changes in the login() with style display Properties.
Check out comments in code, and you will get an idea
function login() {
//initialize login
var parentElement = document.getElementById('deviceready'); // getElementById <- Not ID
var notConnectedElement = parentElement.querySelector('.notConnected');
var connectingElement = parentElement.querySelector('.connecting');
//notConnectedElement.setAttribute('style', 'display:none');
//connectingElement.setAttribute('style', 'display:block;');
notConnectedElement.style.display = 'none'; // Newly Added
connectingElement.style.display = 'block'; // Newly Added
alert("Hello world!");
}
solution2
0 2014-04-04 15:33:48
我不知道为什么，但是当我将函数调用放在form标记内时，它可以工作
<form action="javascript:login()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.