ChocolateChip-UI interfere getElementbyId

本文关键字：getElementbyId interfere ChocolateChip-UI 更新时间：2023-09-26

我目前正在制作一个phonegap应用程序，我昨天添加了ChocolateChip-UI，我遇到了一个问题。我的Javascript代码还不能正常工作。如果我想通过id获取元素，它只会返回null。是否需要使用其他函数来改变html标签内的值?我甚至试过用Chromium中的控制台获得一个值，但我只是得到null返回。我的html代码看起来像这样:

<!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>

我找到了一个解决方案:我只需要将document.getElementbyId()代码放入:

<script>
    $(function() {
        var opts = {
            tabs : 4,
            icons : ["run", "statistics", "settings", "donate"],
            labels : ["Run", "Statistics", "Settings", "Donate"],
            selected : 1
        };
        $.UITabbar(opts);
        //My document.getElementbyId code goes here
    });
</script>

通过将函数调用放在脚本标签中获取元素的函数中，将解决这个问题。