Mr Petroleum Mr Petroleum - 1 month ago 9
HTML Question

Add comment below Header

Hey i got this Code and I would like to add comments below the heading.
But right now after i click the submit send the header and the button wipes away.
However I would like them to stay so that the text input will be displayed below the button.
Thank you in advance!



<html>
<body>

<h1>Add comment below</h1>


<label for="vname">Comment:
<input type="text" id="vname" name="vname">
<input type="submit" value="Submit" onclick="addComment()">

<script>
function addComment()
{
var vname = document.getElementById("vname").value;
document.write(vname);
}
</script>
</body>
</html>




Answer

<html>
    <body>
    
    <h1>Add comment below</h1>
    
        
        <label for="vname">Comment:</label>
        <input type="text" id="vname" name="vname">
        <input type="submit" value="Submit" onclick="addComment()">
        
        <ul id="comments"></ul>
      
        <script>
        function addComment()
            {
              var vname = document.getElementById("vname").value;
              var li = document.createElement('li');
              li.innerText = vname;
              document.getElementById('comments').appendChild(li);
              document.getElementById("vname").value = '';
              document.getElementById("vname").focus();
            }
         </script>
    </body>
    </html>