0

我是 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。

4

3 回答 3

3

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

 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;
 }
于 2013-10-07T21:22:01.307 回答
2

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

container.HasChildNodes()

应该

container.hasChildNodes()

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

于 2013-10-07T21:13:26.493 回答
0

你看过浏览器的控制台吗？Safari 实际上对于调试来说还不错。控制台应该会告诉你错误在哪里。

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

console.log('Step 1');
于 2013-10-07T21:01:42.007 回答