Как использовать innerhtml в JavaScript?

Моя проблема в том, что я не знаю, как показать innerhtml моей формы.

Форма подобна форме опроса, и как только вы нажмете кнопку отправки, все содержимое, на которое я ответил, будет отображаться как сводная страница...

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;

}

Ответы

Ответ 1

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

Во второй строке вы переписываете переменную, не устанавливая .innerHTML. Это то, что вы хотите:

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

Кроме того, вы должны убедиться, что элементы с идентификаторами "first" "middle" и "last" фактически существуют, или это может привести к TypeError.

Ответ 2

Попробуйте следующее:

Но вы должны иметь id как первый. и вам понадобится содержимое div в html-части.

<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>

Ответ 3

Вместо этого:

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

Попробуйте следующее:

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

Вы также можете использовать .innerHTML, чтобы получить "первый", а не .value? Я не уверен, что такое элемент "первым".

Ответ 4

Каков ваш элемент с id "contend", div? тд? тр? или? Как это должно быть,

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

а затем это код javascript

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