textarea中的HTML代码，弹出结果预览的按钮答案

【问题标题】：HTML code within textarea, buttons that pop up preview of the resulttextarea中的HTML代码，弹出结果预览的按钮
【发布时间】：2019-08-13 00:25:18
【问题描述】：

除了主要部分之外，我的任务中的所有内容都已完成。我不知道如何让我的代码将我的 textarea 的内容作为 HTML 代码读取并在新窗口中显示结果。我什至不知道如何在内容出现时显示它们。

我没有保存我访问过的所有不同论坛的完整日志，但这里是我最近查看的几个论坛。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Wiki editor
    </title>
  </head>

  <body>
    <h1> Rachel </h1>
    <script>
      var previewOpen;
      function preview() {
        previewOpen = window.open("", "previewOpen", "width=500, height=600");
        previewOpen.document.body.innerHTML = "HTML"; // Get the value of text area and run HTML code
      }
      function closePreview() {
        previewOpen.close();
        // function to close the preview 
      }
    </script>
    <p>Type your HTML code below:</p>
    <textarea rows="20" cols="75">
</textarea>
    <!-- textarea for submittance of code to be read and written -->
    <br>
    <span><input id="preview" type="submit" value="Preview" onClick="preview()">
    <input id="closePreview" type="submit" value="Close Preview" onClick="closePreview()"></span> <!-- buttons with event handlers to read areatext and perform functions-->
  </body>
</html>

【问题讨论】：

标签： javascript jquery html css textarea

【解决方案1】：

最简单的做法是在您的文本区域添加一个 id：

<textarea id="myTextArea" rows="20" cols="75">
</textarea> <!-- textarea for submittance of code to be read and written-->

然后在你的 previewOpen 函数中，设置 html:

previewOpen.document.body.innerHTML = document.getElementById("myTextArea").value;

【讨论】：

【解决方案2】：

你快接近了。而不是将静态"HTML" 字符串分配给新打开的窗口主体。赋值textarea。

var previewOpen;

function preview() {
    const val = document.querySelector('textarea').value;
    previewOpen = window.open("", "previewOpen", "width=500, height=600");
    previewOpen.document.body.innerHTML = val; // Get the value of text area and run HTML code
}

function closePreview() {
    previewOpen.close(); // function to close the preview 
}

【讨论】：

【解决方案3】：

下面的代码行将静态“HTML”字符串值分配给新打开的窗口主体。

previewOpen.document.body.innerHTML = "HTML"; // Get the value of text area and run HTML code

如果你想取用户输入的值，你必须取textarea的值。

为此，您可以这样做。

1.首先将id添加到您的textarea。

<textarea id="userValues" rows="20" cols="75">

2.然后从function preview()获取用户值。

 function preview() {
        previewOpen = window.open("", "previewOpen", "width=500, height=600");
        previewOpen.document.body.innerHTML = document.getElementById("userValues").value; // Get the value of text area and run HTML code
      }

It will show like this

干杯！！！

【讨论】：

是的！！！！这做到了！我做了很多组合，试图让我的代码读取 textarea，但什么都做不了。非常感谢