document.write - 我的内容在哪里？

时间：2014-12-17 01:48:12

标签： javascript function button

我用有限的HTML / JavaScript知识创建了一个简单的石头剪刀游戏。我创建了几个按钮：一个用于运行游戏，另一个用于重置游戏。

点击游戏按钮后，它会运行我的JavaScript函数，其中包括prompt（）和随机选择。宣布获胜者。但是，我注意到我的所有HTM都已消失了！

  1. 我的内容为何以及在哪里消失？
  2. 如何在用户玩游戏并在提示符中输入信息时保留它们？

    3. 代码：

    <!DOCTYPE html>
<html>
<title>Game: RPS</title>
<body>
<h1>JS Test Output</title>

<h3>Rock, Paper, Scissors: You vs Computer!</h3>
<button onclick="game()">Play Game</button>
<input type="button" value="Reload Page" onClick="window.location.reload()">


<script>


function game(){
var a = prompt("Rock, Paper, or Scissors?");
var b = ["Rock","Paper","Scissors"];
var rand = b[Math.floor(Math.random() * b.length)];

if (a== "Rock" && rand=="Paper") {
    document.write("Computer Wins!");
    }
else if (a=="Rock" && rand=="Scissors") {
    document.write("Player 1 wins!");
    }
else if (a=="Paper" && rand=="Rock") {
    document.write("Player 1 wins!");
    }
else if (a=="Paper" && rand=="Scissors") {
    document.write("Computer wins!");
    }
else if (a=="Scissors" && rand=="Rock") {
    document.write("Computer wins!");
    }
else if (a=="Scissors" && rand=="Paper") {
    document.write("Player 1 wins!");
    }
else if (a == rand) {
    document.write("We have a tie!");
    }
else {
    document.write("That's not a choice! Computer wins!");
    }
}

</script>
</body>
</html>

    感谢您的阅读，我们非常感谢任何贡献。这是我的第一篇文章，我非常有兴趣学习这一点，希望有一天能成为一名程序员（我计划从工作中腾出时间，并可能进入训练营）。我真的很喜欢尝试/阅读/学习编程（不要以为我已经准备好学习计算机科学的东西，比如算法，数据结构，或者我应该现在开始????）

    乔恩

1 个答案:

答案 0 :(得分：3)

替换HTML的原因是因为一个邪恶的JavaScript函数： document.write() 。

绝对是＃34;糟糕的形式。＆＃34;如果您在页面加载时使用它，它只适用于网页;如果在运行时使用它，它将用输入替换整个文档。如果您将其应用为严格的XHTML结构，那么它甚至都不是有效的代码。

问题：

  

document.write写入文档流。在已关闭（或已加载）的文档上调用document.write会自动调用document.open来清除文档。

- quote from the MDN

document.write()有两位心腹，document.open()和document.close()。加载HTML文档时，文档打开＆＃34;打开＆＃34;。 文档加载完毕后，文档已关闭＆＃34;。此时使用document.write()将删除整个（已关闭）HTML文档并将其替换为新文档（公开）文件。这意味着您的网页已经自行删除，并从头开始编写新页面。

我相信document.write()会导致浏览器性能下降（如果我错了，请纠正我）。

一个例子：

此示例在页面加载后将输出写入HTML文档。当你按下＆＃34;消灭＆＃34;时，请注意document.write()的邪恶力量清除整个文件。按钮：

＆＃13;
＆＃13; 
I am an ordinary HTML page.  I am innocent, and purely for informational purposes.  Please do not <input type="button" onclick="document.write('This HTML page has been succesfully exterminated.')" value="exterminate"/> me!
＆＃13;
＆＃13;
＆＃13;

替代方案：

  • .innerHTML这是一个很好的选择，但您需要选择要放置.innerHTML文本的位置。

示例：document.getElementById('output1').innerHTML = 'Some text!';

  • .createTextNode()是W3C推荐的替代方案。

示例：var para = document.createElement('p'); para.appendChild(document.createTextNode('Hello, '));

注意：已知这会导致性能下降（慢于.innerHTML）。我建议改为使用.innerHTML。

新示例（.innerHTML）：

＆＃13;
＆＃13; 
I am an ordinary HTML page.  I am innocent, and purely for informational purposes.  Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page.  Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me!<p id="output1"></p>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题