0

我正在做一个个人博客网站项目，我想在我的索引页面上实现一个简单的留言板。由于预计的网站流量（相对较低），我决定只使用前端实现而不使用以下 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放入的任何内容。可悲的是，它并没有按预期工作——实际上什么也没发生。我正在考虑我的 js 代码中的潜在错误，但只是想不出任何可以解决问题的方法。textarea.appendChildsubmit

任何帮助将不胜感激！！！

4

2 回答 2

0

有两种方法可以做到这一点，即在单击时调用 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 函数来完成此操作，而不是单击按钮。但是，由于这个表单使用了一个文本区域，所以点击返回会在文本中添加一个换行符，并且不会提交表单，所以仍然需要单击按钮才能调用该函数。

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/

于 2018-06-14T21:45:46.010 回答
0

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);
于 2018-06-14T21:56:00.023 回答