Question

我正在开发一个个人博客网站项目，我想在我的索引页面上实现一个简单的留言板。由于预计的站点流量（相对较低），我决定只使用前端实现而不使用以下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>

我的目的是让我的display-area包含点击textarea时.appendChild通过submit放入的内容。可悲的是，它没有按预期工作 - 实际上没有任何事情发生。我正在考虑我的js代码中的潜在错误，但是无法找出可以解决问题的任何东西。

非常感谢任何帮助!!!

Answer 1

可以通过单击调用JavaScript函数或在表单提交时调用它来实现两种方法。

1）调用函数onclick：

将表单包装在表单标记中，并根据元素ID调用JavaScript函数。

请注意，单击该按钮时会调用showInput函数。

function showInput() {
  console.log('showInput called...')
  var userInput = document.getElementById("userInput").value;
  var display = document.getElementById("display");
  display.innerHTML = userInput;
}

<section class="message-board">
  <div class="title">
    <h2>
      Leave a message
    </h2>
  </div>

  <form>
    <textarea class="message" type="text" id="userInput"></textarea><br/>
  </form>

  <input type="submit" onclick="showInput();">
  <div class="display-area">
    Existing comment:
  </div>
  <p><span id="display"></span></p>
</section>

这是一个jsfiddle，使用与上面相同的代码：http://jsfiddle.net/ethanryan/94kvj0sc/

请注意，jsfiddle中的JavaScript在HTML的Head部分的底部被调用。

2）表单提交时调用函数：

您也可以通过在提交表单时调用JavaScript函数来执行此操作，而不是单击按钮。但是，由于此表单使用textarea，命中return将为文本添加换行符，而不提交表单，因此仍需要单击该按钮才能调用该函数。

function showInput() {
  console.log('showInput called...')
  event.preventDefault()
  var userInput = document.getElementById("userInput").value;
  var display = document.getElementById("display");
  display.innerHTML = userInput;
}

<section class="message-board">
  <div class="title">
    <h2>
      Leave a message
    </h2>
  </div>

  <form onsubmit="showInput()">
    <textarea class="message" type="text" id="userInput"></textarea><br/>
    <input type="submit" value="Submit">
  </form>


  <div class="display-area">
    Existing comment:
  </div>
  <p><span id="display"></span></p>
</section>

请注意表单中的event.preventDefault（），因为表单的默认行为是将数据提交到后端数据库。

jsfiddle：http://jsfiddle.net/ethanryan/qpufd469/

第3。附加而不是替换文字

最后，我上面的例子使用innerHTML来替换userInput文本。如果要追加而不是替换文本，可以使用insertAdjacentHTML将文本添加到末尾，然后为其附加换行符。最后，您可以重置表单。

function showInput() {
  console.log('showInput called...')
  event.preventDefault()
  var userInput = document.getElementById("userInput").value;
  var display = document.getElementById("display");
  var theForm = document.getElementById("theForm");
  var linebreak = document.createElement("br");
  display.insertAdjacentHTML('beforeend', userInput);
  display.appendChild(linebreak);
  theForm.reset();
}

<section class="message-board">
  <div class="title">
    <h2>
      Leave a message
    </h2>
  </div>

  <form onsubmit="showInput()" id="theForm">
    <textarea class="message" type="text" id="userInput"></textarea><br/>
    <input type="submit" value="Submit">
  </form>


  <div class="display-area">
    Existing comment:
  </div>
  <p><span id="display"></span></p>
</section>

jsfiddle：http://jsfiddle.net/ethanryan/x4hq0Lzp/

Answer 2

getElementsByClassName（）返回元素集合（请注意 Elements 中的 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);

简单的Javascript前端留言板设计

2 个答案: