Question

我不知道如何将代码放在本网站的代码中，但我是Javascript的新手，我正在尝试制作一个简单的小脚本，允许我按提交和发布消息。

它不起作用，我认为它与<form>标记和document.createElement

有关

<!DOCTYPE html> 
<html> 
    <title>This stuff</title> 
    <head> 
        <style> 
        div.postbox {
            position:fixed;
            top:500px;
        } 
        </style>
    </head> 
    <body> 
        <div id="messages"> </div> 
        <div class="postbox"> 
            <form> 
                <input type="text" id="messagecontent"> 
                <button onclick="post()">submit </button> 
            </form> 
        </div> 
        <script> 
            function post() { 
                var chats = document.getElementById("messages"); 
                var val = document.getElementById("messagecontent").value; 
                var post = document.createElement("div");
                post.textContent = val; 
                chats.appendChild(post); 
            }
        </script> 
    </body> 
</html>

此处位于 jsFiddle 。

Answer 1

首先，如果你不使用它，为什么要使用它？如果您不必重新加载页面，只需删除表单标记即可。我的HTML会是这样的：

<div id="messages"></div>

<div class="postbox">
   <input type="text" id="messagecontent"> 
   <button onclick="post()">submit </button> 
</div>

在JS中，我会使用innerHTML来设置

<script type="text/javascript">

   function post()
   {
      //get the messages div
      var chats = document.getElementById("messages");    
      //get the textbox value
      var val = document.getElementById("messagecontent").value;
      //add the textbox value into the messages div
      chats.innerHTML += val + '<br />';
   }

</script>

Answer 2

为什么不使用

 <button type="button onclick="post()">submit </button>

表单已提交，因为未指定type，默认情况下它是一个提交按钮。

就像它一样 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

“按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。”

Answer 3

你的小提琴无法工作，因为你把代码放到了onLoad事件中（你可以在左边的组合框中看到它）。因此post函数不是全局的，无法调用。

关于代码本身：

建议将该功能放入头部
我认为使用表单是一个好主意（即使你不向服务器发送任何内容），但只有当你用提交替换按钮时。这将（例如）允许您使用ENTER而不是单击按钮来发送消息。

要做到这一点，您不必检测点击，而是检查表单验证。并取消此验证，因此不会向服务器发送任何内容

<!DOCTYPE html>
<html>
    <title>This stuff</title>
    <head>
        <style>
            div.postbox {
                position:fixed;
                top:500px;
            }
        </style>
        <script>
            function post() {
                var chats = document.getElementById("messages");
                var val = document.getElementById("messagecontent").value;
                var post = document.createElement("div");
                post.textContent = val;
                chats.appendChild(post);

                // Returning false is important in order to cancel the form validation!
                return false;
            }
        </script>
    </head>
    <body>
        <div id="messages"> </div>
        <div class="postbox">
            <form onsubmit="return post();">
                <input type="text" id="messagecontent">
                <input type="submit" value="Add message" />
            </form>
        </div>
    </body>
</html>

document.createElement无法正常工作

3 个答案: