简单的Javascript前端留言板设计

我正在做一个个人博客网站项目，我想在我的索引页面上实现一个简单的留言板。由于预计的站点流量（相对较低），我决定只使用前端实现，而不使用以下js和html代码链接到数据库：

<section class="message-board">
        <div class="title">
            <h2>
                Leave a message
            </h2>
        </div>
        <textarea class="message" type="text"></textarea><br/>
        <input value="submit" type="button" class="submit-btn">
        <div class="display-area">
            Existing comment:
        </div>
    </section>

留言


现有意见：

然后是js

<script>
          window.onload=function() {
              var displayArea = document.getElementsByClassName("display-area");
              var btn = document.getElementsByClassName("submit-btn");
              btn.onclick = function() {
                  var comment = document.getElementsByClassName("message").value;
                  displayArea.appendChild(comment);
              };
          }  
    </script>

window.onload=function（）{
var displayArea=document.getElementsByClassName（“显示区域”）；
var btn=document.getElementsByClassName（“提交btn”）；
btn.onclick=函数（）{
var comment=document.getElementsByClassName（“消息”）.value；
displayArea.appendChild（注释）；
};
}  

我的意图是让我的

显示区

包含通过

放入
文本区
的内容。单击
提交
时，追加子项

。可悲的是，它没有按预期工作，实际上什么也没有发生。我在考虑js代码中可能出现的错误，但就是想不出任何解决问题的方法

---

任何帮助都将不胜感激

有两种方法可以做到这一点，一种是在单击时调用JavaScript函数，另一种是在表单提交时调用JavaScript函数

1）单击调用函数：

将表单包装在表单标记中，并基于元素ID调用JavaScript函数

注意：单击按钮时，会调用onclick的showInput函数

函数showInput（）{
log（'showInput调用…'））
var userInput=document.getElementById（“userInput”）.value；
var display=document.getElementById（“display”）；
display.innerHTML=用户输入；
}

留言


现有意见：

GetElementsByCassName（）返回元素的集合（注意元素中的s）。如果只有一个元素与类名匹配，则该元素位于类数组集合的第一个索引中

var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];

您还可以使用querySelector（），它使用CSS选择器（如jQuery）并返回单个元素：

var displayArea = document.querySelector(".display-area");

要附加文本节点（变量注释存储字符串），请使用append（）而不是appendChild（）：

displayArea.append(comment);

---

制作一个html模板。附加模板并将innerHTML设置为消息。或者，代替模板，将html硬编码到javascript中或生成一个外部html文件。我很确定

getElementsByClassName

返回的是HTMLCollection，而不是数组。@TinyGiant是的，你是对的，我想简化我的答案。我对它进行了编辑以反映您的更正。这仍然是一种过度简化（HTMLCollection的实例不仅仅是一个表示元素集合的对象），但是。。。无聊的。