Question

我是网络编程的新手，从未在基础水平上玩过它，并开始使用HTML5画布进行小型图形项目。在开始构建一个真实的基本页面的时候，我遇到了一些非常简单的HTML / JS东西，但是对于我的生活，我无法弄清楚什么是错的。它不会因某种原因而运行。

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

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

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

我的Markup / 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。

Answer 1

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

 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;
 }

Answer 2

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

container.HasChildNodes()

应该是

container.hasChildNodes()

页面会立即显示生成的字段，但是它们会消失吗？这是为什么？

Answer 3

你看过浏览器的控制台了吗？ Safari实际上对调试来说并不算太糟糕。控制台应该显示错误的位置。

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

console.log('Step 1');

页面刷新，javascript没有运行

3 个答案: