Apache Cordova 应用程序 - 使用 Javascript innerHTML 更新内容

Question

我是第一次在 Visual Studio 2015 Enterprise 上使用 Apache Cordova 创建应用程序。

该应用程序是一个简单的时间表检查器，用户可以根据全名和出生日期登录，然后显示他们的正确时间表。

我正在使用 innerHTML 更改索引页面（准确地说是 div displayDiv）以对应变量，因此 0 = 登录页面，1 = 显示期间页面，2 = 显示完整时刻表页面

问题是我无法理解变量 i 是如何在每次更改 innerHTML 时不断初始化的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TimetableTest1</title>
</head>
<body>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script> 
    <script src="scripts/validateUser.js"></script>

    <div id="displayDiv"></div>

<script type="text/javascript">

    function changeContent(func) {
        var oldOnLoad = window.onload;
        if (typeof window.onload != 'function') { 
            window.onload = func
        } else {
            window.onload = function (i) {
                oldOnLoad(i);
                func(); 
            }
        }
    }

    changeContent(function(){

        var i; 

        if (i == undefined && window.onload!='function') {
            i = 0; 
        }
        var display = new Array();

        display[0] = '<h2>VCB TIMETABLE APP</h2><h3>Please enter your full name and date of birth to find out where your next class is</h3><form name="myForm" onsubmit="validateForm();"><input type="text" maxlength="35" id="name"placeholder="Full name" /><br /><input type="text" maxlength="35" id="dob"placeholder="DD/MM/YYYY" /><br /><input type="submit" id="submit" name="submit" value="Log me in!" /><br /><input type="reset" name="Reset" /></form>'
        display[1] = '<h2>Where do I go?</h2>'
        display[2] = '<h2>Your full timetable</h2>'

        displayDiv.innerHTML = display[i];

        alert("changeContent final i = " + i);

    });

 </script>

</body>
</html>

validateUser.js

function validateForm() {
    var nameStr = document.getElementById("name").value;
    var dobStr = document.getElementById("dob").value;
    if (nameStr == null || nameStr == "" || dobStr == null || dobStr == "") {

        alert("Name and DOB must be filled in");

    } else {
        i = 1;
        validateUser(nameStr, dobStr, i)
    }
}

function validateUser(nameStr, dobStr, i) {

    nameStr = nameStr.toUpperCase();

        alert("Hello " + nameStr + "\n validateUser content i: " + i);

任何帮助将不胜感激

谢谢

清纶

Answer 1

您应该将声明 var i; 移到函数之外。

在您的代码中，每次执行更改内容的函数时，都会声明 i 但未初始化，因此其值为 undefined。

因此，条件 i == undefined 将为真。

Answer 2

我找到了解决办法！

提交按钮有问题...

我将其更改为 "button" 并使用 onclick

简单地调用了 validateForm()

Apache Cordova 应用程序 - 使用 Javascript innerHTML 更新内容

Apache Cordova App - update content using Javascript innerHTML

html

javascript

innerhtml

cordova

validateUser.js