HTML code within textarea, buttons that pop up preview of the result

Question

I've gotten everything in my assignment to work except pretty much the main part. I can't figure out how to make my code read the contents of my textarea as HTML code and display the results in a new window. I can't even figure out how to display the contents as they appear.

I haven't kept an entire log of all the the different forums I have visited, but here are a couple of the last few I was checking out.

<!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>

Bathiya Seneviratne · Accepted Answer · 2019-03-22T04:20:05.903

Below code line is assigning static "HTML" string values to your newly opened windows body.

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

If you want to take the values of user input, you have to take the value of textarea.

for that you can do something like this.

1.First add id to your textarea.

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

2.Then take the user values from 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

cheers!!!

Yes!!!! This did it! I did so many combinations of trying to get my code to read the textarea but nothing would do it. Thank you so much — Rachel, Mar 23 '19 at 05:44

score 0 · Answer 2 · answered Mar 22 '19 at 03:31

The simplest thing to do would be to add an id to your text area:

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

then in your previewOpen function, set the html:

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

score 0 · Answer 3 · answered Mar 22 '19 at 03:48

You are almost close. Instead of assigning static "HTML" string to the new opened window body. Assign the value of 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 
}

HTML code within textarea, buttons that pop up preview of the result

3 Answers3