Question

我真的是Java的新手。我试图在单击按钮时输出当前日期以及HTML中textarea标记中的内容。
但是，当textarea没有与名称/ id /类一起声明时，我不知道如何获取内容。

这是我的代码：

<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元素确实具有任何名称/标识/类时，您可以使用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元素的NodeList。

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

或

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

在<div>中显示<textarea>内容

2 个答案: