Блог

Главная - Вопросы по программированию - Как записать информацию о форме, введенную в информационный массив, и распечатать этот массив в виде абзаца?

Как записать информацию о форме, введенную в информационный массив, и распечатать этот массив в виде абзаца?

#javascript #html #arrays #concatenation #paragraph

Вопрос:

Я пытаюсь взять информацию о форме, ввести ее в массив информации, а затем распечатать этот массив в абзац в конкатенации строк.

Вот мой 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 $10 million dollars! We will email you your fortune to: "   email   "."];
      document.querySelector("#future").innerHTML = info;})

Я получаю:

null [объект HTMLInputElement] , вы [объект HTMLInputElement]! Но к вашему следующему дню рождения вы унаследуете 10 миллионов долларов! Мы отправим вам ваше состояние по электронной почте по адресу: null.

Ответ №1:

Есть несколько проблем:

  1. getElementById ожидает только идентификатор в качестве аргумента, без # . ( querySelector это нужно, потому что в качестве аргумента используется css-селектор).
  2. В этом селекторе есть опечатка: const lName = document.querySelector("#lname") : #lName вместо #lname .
  3. Вы напечатали входные элементы, а не их значения. Используйте .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 $10 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>

Комментарии:

1. Вы помогаете кому-то обманывать людей?

Метки: , ,