My problem is that I don't know how to show the innerhtml of my form.
The form is like a survey form and once you clicked the submit button, all the contents I had answered would show like a summary page...
function displayResult() {
var first = document.getElementById("first").value;
var middle = document.getElementById("middle").value;
var last = document.getElementById("last").value;
alert("oh");
var maincontent = document.getElementById("content").innerHTML;
maincontent = "<p>" + first;
}
The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.
The Element property innerHTML gets or sets the HTML or XML markup contained within the element. To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .
Use innerHTML when you're setting text inside of an HTML tag like an anchor tag, paragraph tag, span, div, or textarea.
Appending to innerHTML is not supported: Usually, += is used for appending in JavaScript. But on appending to an Html tag using innerHTML, the whole tag is re-parsed.
var maincontent = document.getElementById("content").innerHTML;
maincontent = "<p>" + first;
On the second line you're overwriting the variable, not setting the .innerHTML
. This is what you want:
var maincontent = document.getElementById("content");
maincontent.innerHTML = "<p>" + first;
Also, you must make sure the elements with ids of "first" "middle" and "last" actually exist, or this might cause a TypeError
.
Try this:
But , you should have id as first. and you should need content div in html part.
<script>
function displayResult() {
var first = document.getElementById("first").value;
var maincontent = "";
maincontent = "<p>" + first + "</p>";
document.getElementById("content").innerHTML = maincontent;
}
</script>
<body>
<input type="text" id="first" value="good">
<button onclick="displayResult();">Click me!!!</button>
<div id="content"></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With