如何获取输入信息数组的表单信息，并将该数组打印到段落中？

Question

我正在尝试获取表单信息，将它们输入到一个信息数组中，然后将该数组打印到字符串连接中的一个段落中。

这是我的 HTML:

<body>
   <input type="text" id="name" placeholder="Enter first name">
   <input type="text" id="lName" placeholder="Enter last name">
   <input type="text" id="age" placeholder="Enter age">
   <input type="text" id="email" placeholder="Enter email address">
   <button>Add Info</button>
   <article>
      <div>
         <p>8</p>
      </div>
   </article>
   <p id="future"></p>
   <main>
</body>

这是我的 Javascript:

const btn = document.querySelector('button');
const paras = document.querySelectorAll('p');

    btn.addEventListener("click", function(){
      const name = document.getElementById("#name");
      const lName = document.querySelector("#lname");
      const age = document.querySelector("#age");
      const email = document.querySelector("#email");
      let info = [name + " " + lName + " , you are " + age + "!" + " But by your next birthday, you will 
      inherit  million dollars! We will email you your fortune to: " + email + "."];
      document.querySelector("#future").innerHTML = info;})

我得到：

null [object HTMLInputElement] , you are [object HTMLInputElement]! But by your next birthday, you will inherit million dollars! We will email you your fortune to: null.

Answer 1

有几个问题：

getElementById 只需要 id 作为参数，没有 #。（querySelector 需要这个，因为它需要一个 css-选择器作为参数）。
此选择器中有错字：const lName = document.querySelector("#lname")：#lName 而不是 #lname。
您打印了输入元素，而不是它们的值。为此使用 .value。

const btn = document.querySelector('button');
const paras = document.querySelectorAll('p');

btn.addEventListener("click", function() {
  const name = document.getElementById("name");
  const lName = document.querySelector("#lName");
  const age = document.querySelector("#age");
  const email = document.querySelector("#email");
  let info = [name.value + " " + lName.value + " , you are " + age.value + "!" + " But by your next birthday, you will inherit  million dollars!We will email you your fortune to: " + email.value + "."];
  document.querySelector("#future").innerHTML = info;
})

<body>
  <input type="text" id="name" placeholder="Enter first name">
  <input type="text" id="lName" placeholder="Enter last name">
  <input type="text" id="age" placeholder="Enter age">
  <input type="text" id="email" placeholder="Enter email address">
  <button>Add Info</button>

  <article>
    <div>
      <p>8</p>
    </div>
  </article>
  <p id="future"></p>

</body>

如何获取输入信息数组的表单信息，并将该数组打印到段落中？

How to take form information entered into an info array, and print out that array to a paragraph?

html

javascript

arrays

concatenation

paragraph