如何在 JS 中使用模板文字打印用户的输入？它给出了错误

Question

我正在使用 JS 来呈现 HTML 代码，并且还想在 HTML 中添加用户输入，因为我正在使用模板文字，但它不起作用。它说 [object HTMLTextAreaElement]

我正在使用此代码。

<script>
function print(){
var heading = document.getElementById("heading") //I have a input tag with id heading in HTML code and type text
open = document.open("")
open.document.write(`
<!DOCTYPE html>
<html>
   <head>
      <title>Dummy Page</title>
   </head>
   <body>
      <div>
         <h1>${heading}</h1>
         // this line is supposed to print user input.
      </div>
   </body>
</html>
}
</script>

Answer 1

页面上打印的消息 [object HTMLTextAreaElement] 准确地告诉您问题所在：您正试图将 DOM 节点注入到字符串模板中。

您应该做的是获取元素 #heading 的值（因为它是一个文本区域元素，它将具有 value 属性），而不是 DOM 节点本身。这应该有效：

var heading = document.getElementById("heading").value;

Answer 2

如果我没理解错的话，您正在尝试从标题元素中获取文本，将其分配给一个新变量，然后将其附加到 html 代码中。

所以你需要得到的是元素的值而不是DOM节点：

var heading = document.getElementById("heading").value;

如何在 JS 中使用模板文字打印用户的输入？它给出了错误

How to print input from user with template literals in JS? It's giving error

javascript

ecmascript-6

template-literals