简单的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>我的目的是让我的display-area包含在点击textarea时通过.appendChild放入submit中的任何内容。遗憾的是，它并没有像预期的那样工作--实际上什么都没有发生。我正在考虑我的js代码中的潜在错误，但就是找不到任何可以解决问题的东西。
我们将非常感谢您的帮助！
回答 2
Stack Overflow用户
发布于 2018-06-15 05:45:46
有两种方法可以做到这一点，一种是在单击时调用JavaScript函数，另一种是在表单提交时调用它。
1)调用函数onclick:
将表单包装在表单标记中，并根据元素Ids调用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是在Head部分的底部调用的。
2)在表单提交上调用函数：
您也可以在提交表单时调用JavaScript函数，而不是单击按钮。但是，由于此表单使用文本区，按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>
Stack Overflow用户
发布于 2018-06-15 05:56:00
getElementsByClassName()返回一个元素集合(注意元素中的s)。如果只有一个元素与类名匹配，则此元素位于类似数组的集合的第一个索引中。
var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];您还可以使用使用CSS选择器(如jQuery)并返回单个元素的querySelector()，：
var displayArea = document.querySelector(".display-area");要追加文本节点(您的变量注释存储字符串)，请使用 append ()而不是appendChild()
displayArea.append(comment);https://stackoverflow.com/questions/50866242
复制相似问题