Блог

Я учусь кодировать js, и одна из моих целей-создать систему псевдо-комментариев на моей веб-странице. Мне интересно, как создать javascript, который может сделать так, чтобы пользователь мог ввести комментарий, и он отобразится на веб-странице. Я пробовал использовать getelementbyclassname, но, поскольку я новичок, я действительно не знаю, что делаю. HTML:

 <div class="commentform">
             <h1>Leave your comment!</h1>
             <br>
             <br>
             <form class="commentform" method="post">
                 <p>Nickname or Name</p> <input id="name" required="required" type="text">
                 <br>
                 <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea>
                 <button type="button" name="commentsubmit">Comment!</button>
            </form>
</div>
 

Поэтому вы хотите, чтобы комментарий появлялся, когда пользователь отправляет форму. Проблема, которую я заметил в вашем коде, заключается в том, что <button type="button" name="commentsubmit">Comment!</button> на самом деле форма не отправляется — она должна была быть type="submit" .

Кроме того, вы не указываете, где на веб-странице вы хотите разместить комментарий, поэтому я предположу, что это какой-то div, который я буду использовать <div id="target"></div> , но это может быть что угодно.

Во-первых: запуск JS при отправке формы

Вы можете использовать .addEventListener функцию для вызова функции при отправке формы. Однако, похоже, у вас возникли некоторые проблемы с выбором формы. Один из способов-использовать document.querySelector , что более универсально , чем getElementsByClassName , поскольку у вас есть более одного элемента с одним и тем же именем класса. Мы хотим выбрать form класс с commentform , который можно представить как form.commentform (выглядит знакомо? это также селектор CSS!).

 document.querySelector("form.commentform").addEventListener("submit", function(event) {

});
 

При этом выбирается форма и добавляется прослушиватель, который запускает функцию при отправке формы. Мы можем поместить код внутри этого тела функции.

Второе: размещение комментария на странице

Сначала нам нужно будет получить комментарий. Комментарий находится в текстовой области с id="comment" — идеально, мы можем использовать document.getElementById("comment") его для выбора. Затем мы можем обратиться .value к текстовой области, чтобы получить ее содержимое.

document.getElementById("comment").value

Затем мы можем задать содержимое <div id="target"></div> комментария. Это можно сделать так же, как мы извлекли текстовую область, за исключением того, что мы используем .innerText вместо .value .

 document.getElementById("target").innerText = document.getElementById("comment").value;
 

Теперь текст целевого div будет равен введенному комментарию. Если вы также хотите, чтобы страница не обновлялась при отправке пользователем формы, вы также захотите включить event.preventDefault(); функцию, чтобы сообщить браузеру, чтобы он не выполнял отправку формы по умолчанию (обновление страницы).

 document.querySelector("form.commentform").addEventListener("submit", function(event) {
    event.preventDefault();
    document.getElementById("target").innerText = document.getElementById("comment").value;
}); 

 <div class="commentform">
             <h1>Leave your comment!</h1>
             <br>
             <br>
             <form class="commentform" method="post">
                 <p>Nickname or Name</p> <input id="name" required="required" type="text">
                 <br>
                 <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea>
                 <button type="submit" name="commentsubmit">Comment!</button>
            </form>
</div>
<div id="target"></div> 

Если вы также хотите отобразить псевдоним, действия аналогичны. Я оставлю это в качестве упражнения для вас.

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

 <div class="commentform">
             <h1>Leave your comment!</h1>
             <br>
             <br>
             <form class="commentform" method="post">
                 <p>Nickname or Name</p> <input id="name" required="required" type="text">
                 <br>
                 <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea>
                 <button onclick='getText()' type="button" value="hello" name="commentsubmit">Comment!</button>
            </form>
  <p id = 'demo'> </p>
</div>
<script>
  function getText (){
  var x = document.getElementById("comment").value
   document.getElementById("demo").innerHTML = "You commment is : "   x;
  console.log(x)
}
</script>
 

Вы можете сделать что-то подобное….

 const handleComment = (e)=>{
  e.preventDefault();
  const newDiv = document.createElement("div");
  
  newDiv.innerText = e.target.comments.value;
  const comments = document.getElementById("comments")
  comments.append(newDiv)
}

const form = document.getElementById("commentForm")
form.addEventListener("submit", handleComment, true); 

 <div id="comments"></div>
<div class="commentform">
             <h1>Leave your comment!</h1>
             <br>
             <br>
             <form id="commentForm" class="commentform" >
                 <p>Nickname or Name</p> <input id="name" required="required" type="text">
                 <br>
                 <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea>
                 <button type="submit" name="commentsubmit">Comment!</button>
            </form>
</div> 

Что я сделал, так это добавил прослушиватель событий в форму, которая фиксирует событие отправки.

Затем я взял текст комментария и использовал внутренний текст, чтобы добавить его в динамически созданный div (используя document.createElement).

Наконец, я добавил div к другому div, который я создал, и дал идентификатор комментариев. (внутри HTML)