document.createElement無法正常工作

我不知道如何在本網站的代碼中添加東西，但我是Javascript新手，我正在嘗試製作一個簡單的小腳本，允許我按下提交併發佈消息。document.createElement無法正常工作

它不工作，我覺得它有什麼做的<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。

來源

2014-05-12 user3628468

的表單發佈，所以無論你做什麼，將是不可見的，因爲重新加載頁面。 – kapa

看看這裏http://jsfiddle.net/avmCX/46/ – Neel

我該如何使頁面不重新加載，我可以看到它？ – user3628468

首先，爲什麼要使用表單如果你不使用它？如果您不必重新加載頁面，只需刪除表格標籤。我的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>

來源

2014-05-12 12:59:51 PiTiNiNjA

你爲什麼不使用

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

表單提交，因爲類型沒有被指定，默認情況下它是一個提交按鈕。

由於這是在 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

「的按鈕的形式的數據提交到服務器。這是默認如果屬性未指定，或者如果屬性被動態地改變到一個空的或無效值。」

來源

2014-05-12 13:12:54 John

由於您將代碼放入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>

來源

2014-05-12 13:23:14

document.createElement無法正常工作

回答

相關問題