How can I use innerHTML in JavaScript?

Question

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;
  var maincontent = document.getElementById("content").innerHTML;
  maincontent = "<p>" + first;
}

Postiche

For one I'd get rid of that trailing ". – Pedate

Check out JSFiddle (jsfiddle.net) and put an example of your HTML and JS, so that we can see what DOM you're working with – Sakai

jsfiddle.net/8TtxV here it is :( – Postiche

element.innerHTML is a property, with a getter and setter. You can't get a reference to it as a node, because when you call it directly like var content = domelement.innerHTML;, you get it's value in a string, not a reference to it like a function. So you have to pass the .innerHTML down to the next line and use it with the node reference. – Salmagundi

@JaredFarrish yes yes, now i understand it. thanks you so much and for the good help anyway.. – Postiche

Answer 1

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.

Salts

@Postiche Make sure you have an element with an id equal to "content". Like this: id="content". Also, make sure the elements with ids of "first" "middle" and "last" actually exist. – Salts

oh.. i see. thank you! i think i forgot the id thing -.- thank you! – Postiche

Answer 2

Try this:

function displayResult() {
  var first = document.getElementById("first").value;

  var maincontent = "";
  maincontent = "<p>" + first + "</p>";
  document.getElementById("content").innerHTML = maincontent;

}

<input type="text" id="first" value="good">
<button onclick="displayResult();">Click me!!!</button>
<div id="content"></div>

But, you should have id as first. and you should need content div in html part.

Flied

Answer 3

Instead of this:

var maincontent = document.getElementById("content").innerHTML;
maincontent = "<p>" + first;`

Try this:

document.getElementById("content").innerHTML = "<p>" + first;

You may also want to use .innerHTML to get 'first', rather than .value? I'm not sure what kind of element 'first' is.

Servility

thanks! i tried it already but it doesn't display anything :( what do you think is the problem with that? sorry... i've been just new in javascript.. :( – Postiche

Answer 4

What is your element with id "contend" , a div? td? tr? or ? The way it should be is

 <div id='content'> 
   </div>

and then this is the javascript code

document.getElementById("content").innerHTML = "<p>" + first + middle + last + "</p>"

Fusil

Answer 5

Another alternative is to use the setHTML method instead of innerHTML internally. You can check the browser support for setHTML.

function displayResult() {
  const first = document.getElementById("first").value;
  const maincontent = document.getElementById("content")
  maincontent.setHTML("<p>" + first)
}

<input type="text" id="first" value="<p>We <em>had</em> to do something about it.</p>">
<button type="button" onclick="displayResult()">Submit</button>
<div id="content"></div>

Decide