Javascript 换行符不'；我不能用append 身体{ 背景色：#D3；字体系列：arial；文本对齐：右对齐；颜色：#008B8B； } #内容包装{ 边界：8px#800000固体；填充：20px；宽度：600px；边界半径：25px；文本对齐：右对齐；背景：白色；保证金：40px自动0px自动； } #包装纸{ 文本对齐：居中；保证金：0px 0px 60px 0px；最小高度：300px； } #头衔{ 字体大小：2.2米；边框底部：7px#008B8B双倍；填充：10px 0px 10px 0px；颜色：#008B8B；文本对齐：居中； } #格式文本{ 文本对齐：居中；边缘顶部：5px； } formfield先生{ 文本对齐：居中；保证金：5PX20PX10PX20PX； } #钮扣{ 边界半径：20px； } #输出{ 字号：1em； } $（文档）.ready（函数（）{ document.getElementById（“按钮”）.onclick=输出； }); // 结束文件。准备好了吗函数输出（）{ var word=document.getElementById（“word”）.value+“\n”； var end=document.getElementById（“repeatnum”）.value； var color=document.getElementById（“usercolor”）.value； var output=document.getElementById（“输出”）； output.style.color=颜色；对于（变量i=0；i_Javascript_Html

Javascript 换行符不'；我不能用append 身体{ 背景色：#D3；字体系列：arial；文本对齐：右对齐；颜色：#008B8B； } #内容包装{ 边界：8px#800000固体；填充：20px；宽度：600px；边界半径：25px；文本对齐：右对齐；背景：白色；保证金：40px自动0px自动； } #包装纸{ 文本对齐：居中；保证金：0px 0px 60px 0px；最小高度：300px； } #头衔{ 字体大小：2.2米；边框底部：7px#008B8B双倍；填充：10px 0px 10px 0px；颜色：#008B8B；文本对齐：居中； } #格式文本{ 文本对齐：居中；边缘顶部：5px； } formfield先生{ 文本对齐：居中；保证金：5PX20PX10PX20PX； } #钮扣{ 边界半径：20px； } #输出{ 字号：1em； } $（文档）.ready（函数（）{ document.getElementById（“按钮”）.onclick=输出； }); // 结束文件。准备好了吗函数输出（）{ var word=document.getElementById（“word”）.value+“\n”； var end=document.getElementById（“repeatnum”）.value； var color=document.getElementById（“usercolor”）.value； var output=document.getElementById（“输出”）； output.style.color=颜色；对于（变量i=0；i

javascript html

Javascript 换行符不'；我不能用append 身体{ 背景色：#D3；字体系列：arial；文本对齐：右对齐；颜色：#008B8B； } #内容包装{ 边界：8px#800000固体；填充：20px；宽度：600px；边界半径：25px；文本对齐：右对齐；背景：白色；保证金：40px自动0px自动； } #包装纸{ 文本对齐：居中；保证金：0px 0px 60px 0px；最小高度：300px； } #头衔{ 字体大小：2.2米；边框底部：7px#008B8B双倍；填充：10px 0px 10px 0px；颜色：#008B8B；文本对齐：居中； } #格式文本{ 文本对齐：居中；边缘顶部：5px； } formfield先生{ 文本对齐：居中；保证金：5PX20PX10PX20PX； } #钮扣{ 边界半径：20px； } #输出{ 字号：1em； } $（文档）.ready（函数（）{ document.getElementById（“按钮”）.onclick=输出； }); // 结束文件。准备好了吗函数输出（）{ var word=document.getElementById（“word”）.value+“\n”； var end=document.getElementById（“repeatnum”）.value； var color=document.getElementById（“usercolor”）.value； var output=document.getElementById（“输出”）； output.style.color=颜色；对于（变量i=0；i,javascript,html,Javascript,Html,给定的程序需要三个输入：一个要打印的单词、打印该单词的次数和应用于所有单词的颜色，然后将输入时间的单词与颜色一起打印到新行中。我面临的问题是，word目前正在同一行中打印，而不是在新的行中打印。我已经使用了“\n”、和，但似乎并不是每次都用新行打印出单词。请建议我一种在代码中工作的方法，在中的新行中打印单词。（注意-要查看的行是output.append（word））。此外，作为请求，代码中没有大的编辑，因为这是最后缺少的内容。这里是一个工作示例，后面的概念是字符串连接 $（文档）.read

给定的程序需要三个输入：一个要打印的单词、打印该单词的次数和应用于所有单词的颜色，然后将输入时间的单词与颜色一起打印到新行中。

我面临的问题是，word目前正在同一行中打印，而不是在新的行中打印。我已经使用了“\n”、
和
，但似乎并不是每次都用新行打印出单词。请建议我一种在代码中工作的方法，在中的新行中打印单词。（注意-要查看的行是output.append（word））。此外，作为请求，代码中没有大的编辑，因为这是最后缺少的内容。

这里是一个工作示例，后面的概念是字符串连接

$（文档）.ready（函数（）{
document.getElementById（“按钮”）.onclick=输出；
}); // 结束文件。准备好了吗
函数输出（）{
var word=document.getElementById（“word”）.value+“
”；
console.log（word）；
var end=document.getElementById（“repeatnum”）.value；
var color=document.getElementById（“usercolor”）.value；
var output=document.getElementById（“输出”）；
output.innerHTML=”“//重置输出
output.style.color=颜色；
对于（变量i=0；ioutput.innerHTML+=word；//“n”、
和
我也使用过document.write（），它会产生一个完全白色的空白屏幕，无论何时使用“\n”然后，结果是单词之间只有一个空格，而不是一个完整的新行。如果忽略新行，则会得到一个有效的解决方案。使用
元素在HTML中插入新行，您将看不到“\n”显示，因为在HTML中这是空白。您需要使用“
”标记以生成换行符。此外，您正在将“输出”名称作为id、函数名和变量重复使用。即使它确实有效，也充其量令人困惑。谢谢，我有一些想法，但无法实现，但感谢您提供的解决方案
<html>

<head>
  <title></title>

  <style type="text/css">
    body {
      background-color: #D3D3D3;
      font-family: arial;
      text-align: right;
      color: #008B8B;
    }

    #contentwrap {
      border: 8px #800000 solid;
      padding: 20px;
      width: 600px;
      border-radius: 25px;
      text-align: right;
      background: white;
      margin: 40px auto 0px auto;
    }

    #formwrap {

      text-align: center;
      margin: 0px 0px 60px 0px;
      min-height: 300px;
    }

    #title {
      font-size: 2.2em;
      border-bottom: 7px #008B8B double;
      padding: 10px 0px 10px 0px;
      color: #008B8B;
      text-align: center;
    }

    #formtext {
      text-align: center;
      margin-top: 5px;
    }

    .formfield {

      text-align: center;
      margin: 5px 20px 10px 20px;
    }

    #button {
      border-radius: 20px;

    }

    #output {
      font-size: 1em;
    }
  </style>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      document.getElementById("button").onclick = output;
    }); // ends document.ready

    function output() {
      var word = document.getElementById("word").value + "\n";
      var end = document.getElementById("repeatnum").value;
      var color = document.getElementById("usercolor").value;
      var output = document.getElementById("output");
      output.style.color = color;
      for (var i = 0; i < end; i++) {
        output.append(word);
      }
    }
  </script>

</head>

<body>

  <div id="contentwrap">

    <div id="title">Fun with Loops</div> <br />

    <div id="formwrap">

      <form>

        <div id="formtext">Enter any word</div>
        <div><input type="text" id="word" class="formfield" size="20"></div>

        <div id="formtext">Enter number of times to repeat word</div>
        <div><input type="text" id="repeatnum" class="formfield" size="20"></div>

        <div id="formtext">Enter color for text</div>
        <div><input type="text" id="usercolor" class="formfield" size="20"></div>

        <div style="margin-top:10px;">
          <input type="button" value="Show Output" id="button">
        </div>

      </form>

      <div id="output"></div>
    </div>
  </div>
</body>

</html>