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&atilde;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

Small addition, outside the scope of your question, but related to your coding. It is better to seperate javascript from HTML. Check out this post here: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice — , Apr 05 '14 at 16:06

score 0 · Answer 1 · answered Apr 03 '14 at 17:23

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

Fiddle Demo

Thanks for that but it still doesn't do anything :( – Johannes Apr 03 '14 at 17:34 — Johannes, Apr 03 '14 at 17:34

score 0 · Answer 2 · answered Apr 04 '14 at 15:33

0

I don't know why, but it works when I put the function call inside the form tag

 <form action="javascript:login()">

answered Apr 04 '14 at 15:33

Johannes

325
4
11

Phonegap button click event

2 Answers2