Question

除了大部分主要内容外，我已经完成了工作中的所有工作。我不知道如何使我的代码以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>

Answer 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;

Answer 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 
}

Answer 3

下面的代码行正在为新打开的Windows主体分配静态“ 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

欢呼！

文本区域内的HTML代码，弹出结果预览的按钮

3 个答案: