Javascript 不工作，我需要帮助。我被建议不要使用 document.write [关闭]答案

【问题标题】：Javascript not working and I need help. I have been advised not to use document.write [closed]Javascript 不工作，我需要帮助。我被建议不要使用 document.write [关闭]
【发布时间】：2013-04-24 01:32:08
【问题描述】：

我有以下 Javascript 代码，但它不工作。谁能帮我解决这个问题？

这些是我想要实现的目标：

将游戏数量增加到用户请求的数量 p1
检查是否只输入了有效数字 p2
第一个 10 和第二个 10 p3 之间的换行符

有什么帮助吗？

<html>
    <head>
        <title>processing</title>
    </head>

    <body>
        <form name="processing" action="processing.php" method="POST">
            <input type="hidden" name="check_submit" value="1" />
            <p>Please select the numbers of players:</p>
            <select>
                <SCRIPT Language="JavaScript">
                    for (i = 1; i <= 8; i++) {
                        document.write('<option value="' + i + '">' + i + '</option>');
                    }
                </script>
            </select>
            <input type="submit" />Scores From Game 1:
            <SCRIPT Language="JavaScript">
                for (i = 0; i < 20; i++) {

                    document.write('<input type="number" name="scores[]" min="0" max="10" value="0"/>')

                }
            </script>
            <input type="submit" />
        </form>
    </body>

</html>

【问题讨论】：

不工作是什么意思。你能指望什么？发生了什么事？
虽然你写了一些代码，但它闻起来就像“为我做作业！”问题...
@doliver w3fools.com...
人们说不要使用document.write，因为它可能会被滥用。你的使用是正确的。总会有人说“永远不要使用这个或那个”，因为可能会滥用该工具。我不同意这种偏执的开发方法。您应该做的是了解您使用的工具，并正确使用它们。
振作起来，准备一个内容丰富的答案，具有讽刺意味的是，这可能会使 user2312345 和一系列 tut 网站链接变得更糟。 document.write 是一把枪，你可以明智地使用它，也可以在脚上开枪。如果它没有坏，就不要修理它。但是，如果您准备学习新技术，那么肯定有大量的网站。

标签： javascript html

【解决方案1】：

为什么不使用 JavaScript，而不是使用原始 HTML？

...
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
</select>
...
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>
<input type="number" name="scores[]" min="0" max="10" value="0"/>

【讨论】：

（站在启蒙中，顿悟和敬畏）我无法说出我是多么想投票赞成，你让我很开心:)
可能是因为在进行更改时需要额外的下载和更高的维护。这是能够使用document.write 生成标记的一部分。
这是真正的解决方案。至于@sillylittleme，权衡是搜索引擎实际上会看到这些字段以及禁用 JS 的浏览器。
嗨 Rick，这正是我要找的。这是因为每场比赛的玩家人数都可以改变。我不希望额外的单元格占用空间或为一定数量的玩家固定。这就是我想要动态生成html的原因。
是的，这应该是一个评论。 OP 并不需要真正查看所有写出的 HTML 来理解它。

【解决方案2】：

无论谁建议它都是正确的 - 避免 document.write 支持 document.creatElement，因为 document.write 能够破坏 DOM 使用。不仅如此，您还通过将 script 放入 select 元素来破坏语义 - 不好。

让我们重新编写您的代码。假设你有这个：

<select id="NumPlayers">
</select>

还有你当前的代码：

 for (i = 1; i <= 8; i++) {
               document.write('<option value="' + i + '">' + i + '</option>');
 }

为了阻止所有地狱般的失败，您可以将其重新设计成这样的：

window.onload = function() {
   var selectTag = document.getElementById("NumPlayers");
   for (var i = 0; i <= 8; i++) {
       var c = new Option(i,i);
       selectTag.add(c);
   }
};

这将做三件有价值的事情：

它会阻止你破坏你的 DOM
最后在语义上是正确的（无脚本->选择子行为）
它会等到页面加载完成后再修改 DOM。

【讨论】：

OP 所示使用 document.write 怎么会破坏 DOM？！
@bfavaretto：我说 document.write 可以打破 DOM 结构，而不是它会。但是，我知道如果你给它一个选择 -> 脚本 -> 选项序列，至少有一个浏览器会出错。
你可以用var c = new Option(i, i);代替document.createElement("option")，也可以用selectTag.add(c);代替selectTag.appendChild(c);。只是替代品，不重要
好吧，有道理； select > script 确实是无效的 html，但也可以通过 document.writing 选择来避免。
@Ian：感谢您的修改。把它们放进去。

【解决方案3】：

不要使用document.write 来动态插入 HTML 内容，而是使用 DOM API：

o = document.createElement('option');
o.value = i;
o.appendChild(document.createTextElement(i));
select.appendChild(o);

document.write 不受欢迎，因为浏览器预解析器无法优化使用此方法插入的 HTML 内容。如果您尝试执行document.write('<img src="pic.jpg"/>'); 之类的操作，则浏览器必须等到 JavaScript 被解析并执行后才能加载图像。正常插入时，预解析器能够发现图像并预加载pic.jpg。

另一个不受欢迎的原因是 JavaScript 必须位于您要插入 HTML 的确切位置。这会导致代码碎片化散布在整个 HTML 文档中，难以维护并阻碍页面稍后呈现 HTML。

【讨论】：

"因为 JavaScript 必须位于您要插入 HTML 的确切位置" - 那么，语句的执行必须是您希望 HTML 到的位置结果。您可以轻松地将此代码放在一个函数中，在 <head> 中，然后只调用您希望 document.write 发生的函数
脑袋里的JS更厉害！ ;) 但你是对的，函数定义可以在任何地方。您仍然遇到所描述的问题，只剩下一小行代码。
脑袋里的JS怎么差？
天哪，“天哪，这很糟糕！我不知道为什么，但它很糟糕”。为什么人们说将 JS 放在头部是不好的形式，因为大多数浏览器一次只能加载两个并发脚本，并且会在此时冻结渲染直到它们完成。如果您的脚本标签少于两个，则 head 参数无关紧要。将脚本标签一直放在页面底部的原因是，如果浏览器冻结渲染，页面已经完全渲染，仅此而已。
（只是火上浇油-您链接的最后一页，来自雅虎基于性能并说头部中的JS是一件坏事...将YUI加载到头部文档。他们为什么这样做？因为 YUI 包含一个异步模块加载器）