页面刷新，javascript 未运行

Page refresh, javascript not running

本文关键字：运行 javascript 刷新      更新时间：2023-09-26

我是Web编程的新手，从来没有玩过它超过基本水平，并且已经用HTML5画布开始了一个小型图形项目。在开始构建一个 reallu 基本页面时，我遇到了一些非常简单的 HTML/JS 内容，但我一生都无法弄清楚出了什么问题。由于某种原因，它不会运行。

我最初将JS托管在外部文件中，但位于同一目录中，例如

<script src="numValues.js"></script>

这是正确的做法还是最佳做法？

我的标记/JS

<!DOCTYPE html>
<html lang="eng">
    <head>
        <META charset="UTF-8"/>
        <title>EZgraph | Pie Chart</title>
        <script type="text/javascript">
 function addFields()
 {
    var numValues = document.getElementById("numValues").value;
    var container = document.getElementById("container");
    while(container.HasChildNodes())
    {
        container.removeChild(container.lastChild);
    }
    for (i=0; i < numValues; i++)
    {
        container.appendChild(document.createTextNode("value " + (i+1)));
        var input = document.createElement("input");
                input.type = "number";
                input.name = "Value" + i;
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
    }
 }
        </script>
    </head>
    <body>
        <div id="inputCountText"></div>
        <form method="post" onsubmit="return addFields()">
            <input type="number" id="numValues" required>
            <input type="submit" value="submit">
        </form>
        <div id="container"></div>
    </body>
</html>

在Mac上是否有任何好的IDE/设置来进行此类工作？我目前正在使用SublimeText。

请参阅我对您自己的答案的评论。此外，您应该始终检查是否得到了所需的内容：

 function addFields()
 {
    var returnValue = false;
    var numValues = document.getElementById("numValues").value;
    if (numValues.length != 0)
    {
        var container = document.getElementById("container");
        if (container.length != 0)
        {
            while (container.hasChildNodes())
            {
                container.removeChild(container.lastChild);
            }
            for (i = 0; i < numValues; i++)
            {
                container.appendChild(document.createTextNode("value " + (i+1)));
                var input = document.createElement("input");
                if (input.length > 0)
                {
                    input.type = "number";
                    input.name = "Value" + i;
                    container.appendChild(input);
                    container.appendChild(document.createElement("br"));
                    returnValue = true;
                }
            }
        }
    }
    return returnValue;
 }

终于找到了我的问题，它是语法

container.HasChildNodes()

应该是 

container.hasChildNodes()

页面在瞬间显示生成的字段，但随后它们消失了？这是为什么呢？

你看过浏览器的控制台吗？Safari 对于调试来说实际上还不错。控制台应显示错误的位置。

我通常使用类似以下内容来测试执行了哪些命令。

console.log('Step 1');
相关文章：