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.
Open a new browser window/iframe and create new document from HTML in TEXTAREA?
https://www.codingforums.com/javascript-programming/174810-previewing-textarea-popup.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>
3 answers
solution1
1 ACCPTED 2019-03-22 04:11:44
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
}
cheers!!!
solution2
0 2019-03-22 03:31:27
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;
solution3
0 2019-03-22 03:48:57
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.