Написание текста в "div" с использованием JavaScript

У меня возникают проблемы, когда я хочу добавить текст в свой тег div, здесь мой код:

<html>

<body>
<div id="comments">

</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>

<script type="text/javascript" >

function writeComment()
    {
    var comment = document.forma.commentUser.value;
    alert(comment);

    document.getElementById('comments').innerHTML=comment;


    }


</script>
</body>

</html>

Он делает то, что он должен делать правильно, но затем он переключается обратно в текстовое поле, и комментарий, который я только что написал, исчезает. Любая идея о том, что здесь происходит?

Большое вам спасибо за ваше время.

Ответ 1

Это потому, что вы отправляете форму.

Быстрое исправление:

<input type="submit" value="Ready!" onClick="writeComment()" />

<input type="button" value="Ready!" onClick="writeComment()" />

Кроме того, вы можете предотвратить действие ввода по умолчанию. В основном говоря браузеру, вы будете обрабатывать действие с помощью preventDefault:

function writeComment(e) {
    var comment = document.forma.commentUser.value;
    alert(comment);

    document.getElementById('comments').innerHTML = comment;
    e.preventDefault();
    return false;
}

Ответ 2

Что происходит, когда ваша форма отправляется, страница обновляется, а div возвращается к содержимому, предварительно настроенному для JavaScript.

Попробуйте поменять тип = 'submit' на 'button' на кнопке.

Ответ 3

Когда вы нажимаете кнопку отправки, форма отправляется, заставляя всю страницу перезагружать. Вам нужно вернуть false из кнопки onpick кнопки отправки, чтобы предотвратить ее:

<input type="submit" value="Ready!" onclick="writeComment(); return false;" />

Или, если вы не хотите, чтобы кнопка когда-либо отправляла изменение формы type="submit" на type="button".

PS. Неправильная практика использования атрибута onclick. Вместо этого привяжите обработчик к событию клика, используя чистый JS.

Ответ 4

Это связано с тем, что вы используете не только обычную кнопку, но и кнопку отправки, которая по умолчанию отправляет форму на сервер. Вы можете видеть, что ваш комментарий отправляется через URL-адрес, поскольку вы не указали метод (GET и POST и GET по умолчанию).

Просто напишите:

onclick="writeComment();return false;"

Возврат FALSE предотвращает поведение по умолчанию - отправляет форму.

Ответ 5

Выполняет другой запрос на сервер, который вызывает повторную визуализацию страницы.

Просто верните false из writeComment.

Ответ 6

Вам нужно будет запретить отправку вашей формы:

<input type="submit" value="Ready!" onClick="writeComment(); return false;" />

Ответ 7

измените это значение

<input type="submit" value="Ready!" onClick="writeComment()" />

<input type="submit" value="Ready!" onClick="writeComment(); return false;" />

Ответ 8

попробуйте <input type="button" value="Ready!" onClick="writeComment()" />

Ответ 9

вам следует переключиться
<input type="submit" value="Ready!" onClick="writeComment()" />
для
<input type="button" value="Ready!" onClick="writeComment()" />

Ответ 10

Или другой вариант заключается в преобразовании submit в button и извлечении его из формы, теперь кнопки могут существовать вне форм и от вставленного кода. Я не понимаю, почему вы должны использовать форма, это означает, что ваша страница не перезагружается, когда вы нажимаете кнопку "Готово".