展示<textarea> <div> 中的內容

Question

我對 Javascript 真的很陌生。 我試圖在單擊按鈕時以 HTML 格式輸出當前日期以及 textarea 標記中的內容。
但是，當 textarea 未與 name/id/class 一起聲明時，我不知道如何獲取內容。

這是我的代碼：

<script>
   function displayPost() {
      var thisDiv = document.getElementById("posts");
      var date = new Date();
      date.classList.add("post-time");
      var textarea = document.getElementByTagName("textarea");
      textarea.classList.add("post-content");
      thisDiv.innerHTML = date + textarea;
   }
</script>


<html>
  <div id="posts"></div>
  <textarea rows="4" cols="60">Type your text here...</textarea>
  <button onclick = "displayPost()">Post</button>
</html>

任何形式的幫助表示贊賞！ 先感謝您！

Answer 1

當 dom 元素確實具有任何名稱/id/class 時，您可以使用document.querySelector ：

var textarea = document.querySelector('textarea');

要以可讀格式獲取當前日期，您可以使用toLocaleString()方法：

var date = new Date();
console.log(date.toLocaleString());
// → "3/21/2020, 7:00:00 PM"

要獲取<textarea>當前輸入的值，您可以使用：

var textarea = document.querySelector('textarea');
console.log(textarea.value);

演示：

 function displayPost() { var thisDiv = document.getElementById('posts'); var date = new Date(); thisDiv.classList.add("post-time"); var textarea = document.querySelector('textarea'); textarea.classList.add("post-content"); thisDiv.innerHTML = date.toLocaleString() + ': '+ textarea.value; }

 .post-time{padding:20px 0}

 <div id="posts"></div> <textarea rows="4" cols="60" placeholder="Type your text here..."></textarea> <button onclick="displayPost()">Post</button>

Answer 2

可以利用document.querySelector()返回第一匹配部件或document.getElementsByTagName()返回的所有textarea元素的節點列表

var textarea = document.querySelector('textarea').value;

或者

var textarea = document.getElementsByTagName('textarea')[0].value;

展示<textarea> <div> 中的內容

問題描述

2 個解決方案

解決方案1
0 2020-03-21 07:27:17

解決方案2
0 2020-03-21 07:41:44

展示<textarea> &lt;div&gt; 中的內容

問題描述

2 個解決方案

解決方案1 0 2020-03-21 07:27:17

解決方案2 0 2020-03-21 07:41:44

展示<textarea> <div> 中的內容

解決方案1
0 2020-03-21 07:27:17

解決方案2
0 2020-03-21 07:41:44