Trying to collect input from user and print out in same page-CodePudding

I'm new to javascript and programming, and I am trying to create a webpage where the user can input the data on the page, and then I wrap it around HTML code to create an HTML template. I've tried using a couple methods but the document.write() command seems to be working for what I need. However, I'm trying to add the HTML tags around the input text and not getting a usable format.Full code below:


<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta charset="utf-8"/>
    </head>
    <body>

        <h1>Title<input type="textarea" id="top_field" value="" style="width:100px; height:30px"></h1>
        <br/>
        <h2>Position/Proposal<input type="textarea" id="subtitle_field" value="" style="width:100px; height:30px"></h2>
        <br/>

        <p>Body Text: <input type="textarea" id="field1" value="" style="width:100px; height:30px"></p><br/>

        <button id="sub_button" type="button" onclick="myFunction()">Copy</button>

        <div id="full_code" hidden>
            <p id="must_have" value='text'>&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
            &lt;meta charset="utf-8"/&gt;<br>&lt;/head&gt;
            </p>
            <p id="less_than"><</p>
            <p id="more_than">></p>
        </div>

        <script>
            function myFunction() {

                //const html_array = ["<!DOCTYPE>", "<html>", "<head>", "<meta name="viewport" content="width=device-width, initial-scale=1"/>", "<meta charset="utf-8"/>", "</head>"];

                if(document.getElementById("field1").value != "" || document.getElementById("top_field").value != "" || document.getElementById("subtitle_field").value != ""){
                    
                    let p_elem = document.getElementById("less_than").innerText   "p"   document.getElementById("more_than").innerText;
                    let pend = document.getElementById("less_than").innerHTML   "/p"   document.getElementById("more_than").innerHTML;
                    let body = document.getElementById("less_than").innerHTML   "body"   document.getElementById("more_than").innerHTML;
                    let bodyend = document.getElementById("less_than").innerHTML   "/body"   document.getElementById("more_than").innerHTML;


                    var top_text = document.getElementById("must_have").innerText;
                    var newParagraph2 = document.createElement("p"); //creates a new paragraph element
                    var newText2 = document.createTextNode(top_text); //creates text along with output to be displayed 
                    newParagraph2.appendChild(newText2); //created text is appended to the paragraph element created
                    document.body.appendChild(newParagraph2); // created paragraph and text along with output is appended to the document body

                    
                    var main_text = document.getElementById("field1").value;
                    var newParagraph = document.createElement("p"); //creates a new paragraph element
                    var newText = document.createTextNode(main_text); //creates text along with output to be displayed 
                    newParagraph.appendChild(newText); //created text is appended to the paragraph element created
                    document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body*/
                    
                    var title_text = document.getElementById("top_field").value;
                    var newParagraph3 = document.createElement("p"); //creates a new paragraph element
                    var newText3 = document.createTextNode(title_text); //creates text along with output to be displayed 
                    newParagraph3.appendChild(newText3); //created text is appended to the paragraph element created
                    document.body.appendChild(newParagraph3); // created paragraph and text along with output is appended to the document body
                
                    var less_symbol = document.getElementById("less_than").value;
                    var newParagraph4 = document.createElement("p"); //creates a new paragraph element
                    var newSymbol = document.createTextNode(less_symbol); //creates text along with output to be displayed 
                    newParagraph4.appendChild(newSymbol); //created text is appended to the paragraph element created
                    document.body.appendChild(newParagraph4); // created paragraph and text along with output is appended to the document body*/

                    document.writeIn(newParagraph2.innerText); //
                }
                else{
                    document.write("No text");
                }
                
            }
        </script>
</body>
</html>

By now I'm able to read the text input and output in the same page below, but not able to add anything around the appended child or make the original tags above appear vertically. If someone can lead me in the right direction on method I should be using I would greatly appreciate it.

CodePudding user response：

I would suggest NOT writing html strings with document.write. Instead, you can use createElement and appendChild to create html tags and add them to the page. It's much more readable and less likely to cause syntax errors in your html tags.

For example, to create a div that contains text from your inputfield:

let fieldValue = document.getElementById("myfield").value

let div = document.createElement("div")
div.innerHTML = fieldValue
document.body.appendChild(div)

Hope this generic example points you in the right direction!