I am currently working on a phonegap app and I have yesterday added the ChocolateChip-UI, and I have run into a problem. My Javascript code does not work properly, yet. If I want to get an element by id, it just returns null. Is there the need to use other functions to change the value inside of html tags? I even tried it to get a value with the Console in Chromium but I just get null returned. My html code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="stylesheet" type="text/css" href="css/resets.css" />
<link rel="stylesheet" type="text/css" href="css/chui-android-3.8.5.css" />
<link rel="stylesheet" type="text/css" href="css/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/chui-3.8.5.min.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/gps.js"></script>
<script type="text/javascript" src="js/stopwatch.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/storage.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Simply running</title>
</head>
<body>
<script>
$(function() {
var opts = {
tabs : 4,
icons : ["run", "statistics", "settings"],
labels : ["Run", "Statistics", "Settings"],
selected : 1
};
$.UITabbar(opts);
});
onload_run();
</script>
<!-- The run/home page--->
<nav>
<h1>Simply Running</h1>
</nav>
<article id="Run" class="current">
<p id="stopwatch">Hello world!</p>
<input type="button" value="Start" onclick="start();">
</article>
<!-- The statistics page--->
<nav class="next">
<h1>Statistics</h1>
</nav>
<article id="statistics" class="next">
<!-- The settings page--->
</article>
<nav class="next">
<h1>Settings</h1>
</nav>
<article id="settings" class="next">
</article>
</body>
</html>
I have find a solution: I just have to put the
document.getElementbyId()code inside of :By putting the function call to the function that gets the element inside of the script tags, will solve it.