Question

<html>
<head></head>
<body>
<center>
    <div id="output" style="width:1000px; height:800px; background-color:grey; word-wrap: break-word;"></div> //divider is here
</center>
</body>
<script>
var printOut = function(text) {
  var output = document.getElementById("output");
  output.innerHTML += text;
};
var userChoice = prompt("Do you choose Rock, Paper, or Scissors?") 
    console.log(printOut("You chose " + userChoice + ".")); //Used here..
var computerChoice = Math.random();
  if (computerChoice < 0.34) {
    computerChoice = "Rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "Paper";
} else {
    computerChoice = "Scissors";
} console.log(printOut("The computer chooses " + computerChoice + ".")); //Here too..

var compareChoice = function(userChoice, computerChoice) {
    if(userChoice === computerChoice) {
        return "The result is a tie!";
    }    
    if (userChoice === "Rock") {
       if(computerChoice === "Scissors") {
            return "You win! Rock smashes Scissors!";
        } else {
            return "You lose! Paper covers Rock!";
        }
    }    
    if (userChoice === "Paper") {
        if(computerChoice === "Rock") {
            return "You win! Paper covers Rock!";
        } else {
            return "You lose! Scissors cut Paper!!"
        }
    }    
    if (userChoice === "Scissors") {
        if (computerChoice === "Paper") {
            return "You win! Scissors cut Paper!";
        } else {
            return "You lose! Rock smashes Scissors!";
        }
    }
};

console.log(printOut(compareChoice(userChoice, computerChoice))); //Lastly, here.


</script>
</html>

如何将结果放在不同的行上，如：

＆＃34;你选择了Rock。

电脑选择了Scissors。

Rock砸碎剪刀。你赢了！＆＃34;

而不是

＆＃34;你选择了Rock。电脑选择了Scissors。岩石砸碎剪刀。你赢了！＆＃34;

Answer 1

在HTML中<br />标记用于分隔行。但是，您也可以使用<pre></pre>将文本呈现为代码。然后，您可以使用魔术结束字符分隔：`\ n'。

如果您想使用\n，您的HTML必须如下所示：

<center>
    <pre id="output" style="width:1000px; height:800px; background-color:grey; word-wrap: break-word;"></pre> //divider is here
</center>

在这种情况下，将\n放在您想要换行的位置。此外，每个空格（）都将被渲染 - 就像StackOverflow中的灰色代码块一样。

或者，您也可以在任何元素上使用CSS样式whitespace:pre。

JSFiddle example you to properly append and create a log

注意：我想提醒您，将文本作为字符串附加到HTML中会导致浏览器重新解析该节点中的HTML。当您的日志更长时，这可能会造成滞后。

这是附加纯文本的正确方法：

function addText(text, idOrNode) { if(idOrNode.tagName==null) idOrNode = document.getElementById(idOrNode); if(idOrNode==null) throw new Error("Can't append text - the element is invalid."); var text_element = document.createTextNode(text); idOrNode.appendChild(text_element); }

Answer 2

强制它们出现在新行上的方法不止一种，但最简单的方法是将换行符<br>添加到字符串中，无论你想要开始一个新行。例如：

console.log(printOut("You chose " + userChoice + ".<br>"));

或者，您可以将每行文本包装在像<div>或<p>这样的块html元素中，如下所示：

console.log(printOut("<p>You chose " + userChoice + ".</p>"));

如何在此分隔线中按行分隔文本？

2 个答案:

JSFiddle example you to properly append and create a log