Tizen TAU 更改页面 - 页面更改后，Javascript 和其他选项（如 onload）不起作用（可穿戴 V5.5）答案

【问题标题】：Tizen TAU Change Page - Javascript and other options like onload not working after Page Change (Wearable V5.5)Tizen TAU 更改页面 - 页面更改后，Javascript 和其他选项（如 onload）不起作用（可穿戴 V5.5）
【发布时间】：2021-12-23 20:24:48
【问题描述】：

我有一个包含几个不同 HTML 页面的项目。如果我用tau.changePage('second.html'); 切换页面按钮和其他东西找不到在同一个 html 文档上声明的函数。但可以从其他文件或 index.html 中定义的 javascript 函数调用。

我已经尝试使用主项目和一个空项目，该项目仅包含两个站点，每侧都有一个按钮。见下文。我必须手动将焦点设置在新的 html 网站上吗？函数 test() 得到这个错误：

file:///second.html (1) :Uncaught ReferenceError: test is not defined

<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Basic</title>
    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
    
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
    <!-- load theme file for your application -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="ui-page ui-page-active" id="main">
        <header class="ui-header">
            <h2 class="ui-title">TAU Basic</h2>
        </header>
        <div class="ui-content ui-content-padding">
            <p>Hello! </p>
            <button class="ui-btn" id="btn" onclick="changepage()">Next</button>
        </div>
    </div>
    <script src="lib/tau/wearable/js/tau.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/lowBatteryCheck.js"></script>
    <script src="js/circle-helper.js"></script>
    <!--  <script src="./lib/tau/mobile/js/tau.js" type="text/javascript"></script> -->
    <script>
    function changepage()
    {
        tau.changePage('second.html');
    };
    </script>
</body>



<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Basic2</title>
    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
    
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
    <!-- load theme file for your application -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="ui-page ui-page-active" id="second">
        <header class="ui-header">
            <h2 class="ui-title">TAU Basic</h2>
        </header>
        <div class="ui-content ui-content-padding">
            <p>Hello! </p>
            <button class="ui-btn" id="btn" onclick="test()">Test</button>
        </div>
    </div>
    <script src="lib/tau/wearable/js/tau.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/lowBatteryCheck.js"></script>
    <script src="js/circle-helper.js"></script>
    <!-- <script src="./lib/tau/mobile/js/tau.js" type="text/javascript"></script> -->
    <script>
    function test()
    {
        console.log("test");
    };
    </script>

【问题讨论】：

标签： javascript tizen

【解决方案1】：

这里的问题似乎是函数定义的顺序和函数的调用。在您的 onclick 事件侦听器中，您引用了一个稍后定义的函数，因此您会收到 ReferenceError。

将 HTML、CSS 和 JavaScript 相互分离到各自的文件中并将它们链接在一起通常是一种更好的做法。当然，非常简单的例子可能是这种做法的一个例外。

话虽如此，您应该避免在标记中使用事件侦听器，而应在 JavaScript 文件中这样做。 Please see this SO answer to this topic.

我假设您的 app.js 包含您的逻辑。您可以将测试函数提取到该文件中并执行以下操作：

const nextButton = document.getElementById("btn");
nextButton.addEventListener("click", () => {
    test();
});

function test() {
    console.log("test");
}

您现在应该在更改页面时在控制台中看到“测试”？

最好的问候

【讨论】：

感谢您的回答。我的主要项目的问题是我不止一次地包含了 ./lib/tau/mobile/js/tau.js。所以它似乎生成了不止一个页面堆栈。我不得不将我的脚本标签与函数一起移动到主 div 中。现在它起作用了。 PS：在主项目中，其他功能已经在不同的 .js 文件中 :) Best Regards