blocks|key|4115|text|有两种方法可以做到这一点，一种是在单击时调用JavaScript函数，另一种是在表单提交时调用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4116|1)调用函数onclick:|offset|length|style|BOLD|4117|将表单包装在表单标记中，并根据元素Ids调用JavaScript函数。|4118|请注意，当单击按钮时，showInput函数将在单击时被调用。|4119|​|4120|function+showInput()+{
++console.log('showInput+called...')
++var+userInput+=+document.getElementById("userInput").value;
++var+display+=+document.getElementById("display");
++display.innerHTML+=+userInput;
}|code-block|syntax|javascript|4121|<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>|4122|4123|这是一个jsfiddle，具有与上面相同的代码：http://jsfiddle.net/ethanryan/94kvj0sc/|4124|注意，jsfiddle中的JavaScript是在Head部分的底部调用的。|4125|2)在表单提交上调用函数：|4126|您也可以在提交表单时调用JavaScript函数，而不是单击按钮。但是，由于此表单使用文本区，按return将在文本中添加一个换行符，而不是提交表单，因此仍需要单击该按钮才能调用函数。|4127|4128|function+showInput()+{
++console.log('showInput+called...')
++event.preventDefault()
++var+userInput+=+document.getElementById("userInput").value;
++var+display+=+document.getElementById("display");
++display.innerHTML+=+userInput;
}|4129|<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>|4130|4131|请注意表单中的event.preventDefault()，因为表单的默认行为是将数据提交到后端数据库。|4132|jsfiddle：http://jsfiddle.net/ethanryan/qpufd469/|4133|3.追加而不是替换文本|4134|最后，我上面的示例使用innerHTML替换了userInput文本。如果要附加而不是替换文本，可以使用insertAdjacentHTML将文本添加到末尾，然后在其后面附加换行符。最后，您可以重置表单。|4135|4136|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();
}|4137|<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>|4138|4139|jsfiddle：http://jsfiddle.net/ethanryan/x4hq0Lzp/|4140|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ethanryan/94kvj0sc/|1|http://jsfiddle.net/ethanryan/qpufd469/|2|http://jsfiddle.net/ethanryan/x4hq0Lzp/^0|0|0|E|0|0|0|0|0|0|0|O|13|0|0|0|0|D|0|0|0|0|0|0|0|9|13|1|0|0|B|0|0|0|0|0|0|9|13|2|0^^$0|@$1|2|3|4|5|6|7|21|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|22|8|@$D|23|E|24|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|25|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|26|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|27|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|28|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|29|8|@]|9|@]|A|$Q|R]]|$1|U|3|M|5|6|7|2A|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2B|8|@]|9|@$D|2C|E|2D|1|2E]]|A|$]]|$1|X|3|Y|5|6|7|2F|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2G|8|@$D|2H|E|2I|F|G]]|9|@]|A|$]]|$1|11|3|12|5|6|7|2J|8|@]|9|@]|A|$]]|$1|13|3|M|5|6|7|2K|8|@]|9|@]|A|$]]|$1|14|3|15|5|P|7|2L|8|@]|9|@]|A|$Q|R]]|$1|16|3|17|5|P|7|2M|8|@]|9|@]|A|$Q|R]]|$1|18|3|M|5|6|7|2N|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2P|8|@]|9|@$D|2Q|E|2R|1|2S]]|A|$]]|$1|1D|3|1E|5|6|7|2T|8|@$D|2U|E|2V|F|G]]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1H|3|M|5|6|7|2X|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|P|7|2Y|8|@]|9|@]|A|$Q|R]]|$1|1K|3|1L|5|P|7|2Z|8|@]|9|@]|A|$Q|R]]|$1|1M|3|M|5|6|7|30|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|31|8|@]|9|@$D|32|E|33|1|34]]|A|$]]|$1|1P|3|-4|5|6|7|35|8|@]|9|@]|A|$]]]|1Q|$1R|$5|1S|1T|1U|A|$1V|1W]]|1X|$5|1S|1T|1U|A|$1V|1Y]]|1Z|$5|1S|1T|1U|A|$1V|20]]]]

<p>Two ways this can be done are by calling the JavaScript function on click, or by calling it on form submission.</p>

<p><strong>1) call function onclick:</strong></p>

<p>Wrap your form within a form tag, and call your JavaScript function based on the element Ids.</p>

<p>Note the showInput function is being called onclick when the button is clicked.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showInput() {
  console.log('showInput called...')
  var userInput = document.getElementById("userInput").value;
  var display = document.getElementById("display");
  display.innerHTML = userInput;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="message-board"&gt;
  &lt;div class="title"&gt;
    &lt;h2&gt;
      Leave a message
    &lt;/h2&gt;
  &lt;/div&gt;

  &lt;form&gt;
    &lt;textarea class="message" type="text" id="userInput"&gt;&lt;/textarea&gt;&lt;br/&gt;
  &lt;/form&gt;

  &lt;input type="submit" onclick="showInput();"&gt;
  &lt;div class="display-area"&gt;
    Existing comment:
  &lt;/div&gt;
  &lt;p&gt;&lt;span id="display"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>Here's a jsfiddle, with the same code as above: <a href="http://jsfiddle.net/ethanryan/94kvj0sc/" rel="nofollow noreferrer">http://jsfiddle.net/ethanryan/94kvj0sc/</a></p>

<p>Note the JavaScript in the jsfiddle is being called at the bottom of the Head section of the HTML.</p>

<p><strong>2) call function on form submit:</strong></p>

<p>You can also do this by calling the JavaScript function on the submission of the form, instead of on the click of the button. However, since this form uses a textarea, hitting return will add a line break to the text, and not submit the form, so the button still needs to be clicked for the function to be called.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showInput() {
  console.log('showInput called...')
  event.preventDefault()
  var userInput = document.getElementById("userInput").value;
  var display = document.getElementById("display");
  display.innerHTML = userInput;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="message-board"&gt;
  &lt;div class="title"&gt;
    &lt;h2&gt;
      Leave a message
    &lt;/h2&gt;
  &lt;/div&gt;

  &lt;form onsubmit="showInput()"&gt;
    &lt;textarea class="message" type="text" id="userInput"&gt;&lt;/textarea&gt;&lt;br/&gt;
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;


  &lt;div class="display-area"&gt;
    Existing comment:
  &lt;/div&gt;
  &lt;p&gt;&lt;span id="display"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>Note the event.preventDefault() in the form, since the default behavior of forms is to submit data to a backend database.</p>

<p>jsfiddle: <a href="http://jsfiddle.net/ethanryan/qpufd469/" rel="nofollow noreferrer">http://jsfiddle.net/ethanryan/qpufd469/</a></p>

<p><strong>3. appending instead of replacing text</strong></p>

<p>Finally, my examples above used innerHTML to replace the userInput text. If you want to append instead of replace the text, you can use insertAdjacentHTML to add the text to the end, and then append a linebreak to it. Finally, you can reset the form.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="message-board"&gt;
  &lt;div class="title"&gt;
    &lt;h2&gt;
      Leave a message
    &lt;/h2&gt;
  &lt;/div&gt;

  &lt;form onsubmit="showInput()" id="theForm"&gt;
    &lt;textarea class="message" type="text" id="userInput"&gt;&lt;/textarea&gt;&lt;br/&gt;
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;


  &lt;div class="display-area"&gt;
    Existing comment:
  &lt;/div&gt;
  &lt;p&gt;&lt;span id="display"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>jsfiddle: <a href="http://jsfiddle.net/ethanryan/x4hq0Lzp/" rel="nofollow noreferrer">http://jsfiddle.net/ethanryan/x4hq0Lzp/</a></p>


blocks|key|4794|text|getElementsByClassName()返回一个元素集合(注意元素中的s)。如果只有一个元素与类名匹配，则此元素位于类似数组的集合的第一个索引中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4795|var+displayArea+=+document.getElementsByClassName("display-area")[0];
var+btn+=+document.getElementsByClassName("submit-btn")[0];|code-block|syntax|javascript|4796|您还可以使用使用CSS选择器(如jQuery)并返回单个元素的querySelector()，：|4797|var+displayArea+=+document.querySelector(".display-area");|4798|要追加文本节点(您的变量注释存储字符串)，请使用+append+()而不是appendChild()|4799|displayArea.append(comment);|4800|entityMap^0|0|O|0|0|V|F|0|0|O|A|11|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

<p><strong>getElementsByClassName()</strong> returns a collection of elements (note the <em>s</em> in <em>Elements</em>). If you have only one element that matches the class name, you have this element in the first index of the array-like collection.</p>

<pre><code>var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];
</code></pre>

<p>You can also use <strong>querySelector()</strong>, that uses CSS selectors (like jQuery) and returns a single element:</p>

<pre><code>var displayArea = document.querySelector(".display-area");
</code></pre>

<p>In order to append a text node (your variable comment stores a string), use <strong>append()</strong> instead of <strong>appendChild()</strong>:</p>

<pre><code>displayArea.append(comment);
</code></pre>


<p>I am working on a personal blog website project, and I wanted to implement a simple message board on my index page. Due to the projected site traffic (relatively low) I decided on only using a front-end implementation without linking to a database with the following js and html code:</p>

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

<p>and then the js,</p>

<pre><code>&lt;script&gt;
          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);
              };
          }  
    &lt;/script&gt;
</code></pre>

<p>My intention was to make my <code>display-area</code> contain whatever was put in <code>textarea</code> via <code>.appendChild</code> when <code>submit</code> is clicked. Sadly, it isn't working as intended-nothing actually happens. I am thinking about potential errors in my js code, but just couldn't figure out anything that would resolve the problem. </p>

<p>Any assistance will be greatly appreciated!!!</p>


Simple Javascript front-end message board design

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在做一个个人博客网站项目，我想在我的索引页面上实现一个简单的留言板。由于预计的网站流量(相对较低)，我决定只使用前端实现，而不使用以下js和html代码链接到数据库：<section class="message-board">        <div class="title">            <h2> ...

问简单的Javascript前端留言板设计
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的Javascript前端留言板设计EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的Javascript前端留言板设计
EN