Использование переменных в форме

ПОЖАЛУЙСТА ПОМОГИ! Я очень новичок в JavaScript и полностью зациклен на том, почему мой код не выводит результат. Цель моего задания - принять вводимые пользователем данные в заранее установленную форму. Как только пользователь нажимает кнопку «Отправить», предустановленная форма заменяет ключевые переменные введенными пользователем. Вот мой исходный код и js:

Код и js: `

function showFormInput() { //get data from the form
  var a1 = document.getElementsById('rname').value;
  var b2 = document.getElementsById('orgname').value;
  var c3 = document.getElementsById('date').value;
  var d4 = document.getElementsById('web').value;
  var e5 = document.getElementsById('hname').value;
  
  // Displaying data in the HTML
  document.getElementById('recipientName').innerHTML = a1;
  document.getElementById('organizationName').innerHTML = b2;
  document.getElementById('eventDate').innerHTML = c3;
  document.getElementById('websiteURL').innerHTML = d4;
  document.getElementById('hostName').innerHTML = e5;
}

<header>
  <div class = "top">
    <a class = "logo" href = "index.html">CapellaVolunteers<span 
    class = "dotcom">.org</span></a>
  </div>
  <nav>
    <ul class = "topnav">
      <li><a href = "index.html">Home</a></li>
      <li><a href = "invitation.html" class = "active">Invitation</a></li>
      <li><a href = "gallery.html">Gallery</a></li>
      <li><a href = "registration.html">Registration</a></li>
    </ul>
  </nav>
</header>
<section id = "pageForm">
  <label for = "recipientName">Recipient name:</label>
  <input type = "text" id = "rname" name = "recipientName" placeholder = "Enter your 
    Recipient Name" />
  <label for = "organizationName">Organization name:</label>
  <input type = "text" id = "orgname" name = "organizationName" placeholder = "Enter 
    your Organization Name" />
  <label for = "eventDate">Event Date:</label>
  <input type = "text" id = "date" name = "eventDate" placeholder = "Enter your 
    Event Date" />
  <label for = "websiteURL">URL:</label>
  <input type = "text" id = "web" name = "websiteURL" placeholder = "Enter your 
    Website URL" />
  <label for = "hostName">Host name:</label>
  <input type = "text" id = "hname" name = "hostName" placeholder = "Host Name" />
  <input type = "submit" value = "Submit" onclick = "showFormInput()" />
</section>
<article id = "placeholderContent">
  Hello
  <span id = "recipientName">recipientName</span>!
  <br/>
  <br/> You have been invited to volunteer for an event held by
  <span id = "organizationName">organizationName</span> on
  <span id = "eventDate">eventDate</span>. Please come to the following website:
  <span id = "websiteURL">websiteURL</span> to sign up as a volunteer.
  <br/>
  <br/> Thanks!
  <br/>
  <br/>
  <span id = "hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>

javascript forms user-input

29.07.2018 04:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

253

Ответы 1

Кажется, работает после нескольких исправлений после запуска через линтер.

Пара вопросов:

Вы имели в виду getElementById (не getElementsById)
Нижняя половина кода была заключена в блок {} (не знаю почему). Все они должны быть в одном блоке, если должны запускаться по щелчку.
Комментарии начинаются с двух косых черт: (//).

function showFormInput() { //get data from the form
    var a1 = document.getElementById('rname').value; // 'rname reference id in html(not included with html you will need to add.)
    var b2 = document.getElementById('orgname').value;
    var c3 = document.getElementById('date').value;
    var d4 = document.getElementById('web').value;
    var e5 = document.getElementById('hname').value;
    
    document.getElementById('recipientName').innerHTML = a1; // 'recipientName reference name in the html
    document.getElementById('organizationName').innerHTML = b2;
    document.getElementById('eventDate').innerHTML = c3;
    document.getElementById('websiteURL').innerHTML = d4;
    document.getElementById('hostName').innerHTML = e5;
}

document.getElementById('showFormInput').addEventListener('click', showFormInput);

// You can leave this in the <script> tags with an inline `onclick=` if needed (though I wouldn't recommend it). Just easier to edit in the JS.

<html lang = "en-US">
   <head>
      <title>Invitation Page</title>
      <link rel = "stylesheet" type = "text/css" href = "css/main.css" />
   </head>
   <body>
      <header>
         <div class = "top">
            <a class = "logo" href = "index.html">CapellaVolunteers<span 
               class = "dotcom">.org</span></a>
         </div>
         <nav>
            <ul class = "topnav">
               <li><a href = "index.html">Home</a></li>
               <li><a href = "invitation.html" class = "active">Invitation</a></li>
               <li><a href = "gallery.html">Gallery</a></li>
               <li><a href = "registration.html">Registration</a></li>
            </ul>
         </nav>
      </header>
      <section id = "pageForm">
         <label for = "recipientName">Recipient name:</label>
         <input type = "text" id = "rname" name = "recipientName" placeholder = "Enter your Recipient Name" />
         <label for = "organizationName">Organization name:</label>
         <input type = "text" id = "orgname" name = "organizationName" placeholder = "Enter your Organization Name" />
         <label for = "eventDate">Event Date:</label>
         <input type = "text" id = "date" name = "eventDate" placeholder = "Enter your Event Date" />
         <label for = "websiteURL">URL:</label>
         <input type = "text" id = "web" name = "websiteURL" placeholder = "Enter your Website URL" />
         <label for = "hostName">Host name:</label>
         <input type = "text" id = "hname" name = "hostName" placeholder = "Host Name" />
         <input type = "submit" id='showFormInput' value = "Submit" />
      </section>
      <article id = "placeholderContent">
         Hello
         <span id = "recipientName">recipientName</span>!
         <br/>
         <br/> You have been invited to volunteer for an event held by
         <span id = "organizationName">organizationName</span> on
         <span id = "eventDate">eventDate</span>. Please come to the following 
         website:
         <span id = "websiteURL">websiteURL</span> to sign up as a volunteer.
         <br/>
         <br/> Thanks!
         <br/>
         <br/>
         <span id = "hostName">hostName</span>
      </article>
      <footer>This events site is for IT-FP3215 tasks.</footer>
   </body>
</html>

29.07.2018 05:01

Другие вопросы по теме

.Выбранная форма команды Excel

Как возможна двойная отправка HTML-формы?

Контактная форма не отправляет почту

Libcurl C++ - Как опубликовать данные формы для этой конкретной формы?

Событие внутри настраиваемого средства визуализации не запускается

Регулярное выражение помещает в списки все, что ему соответствует, и все, что нет

VB.NET Изменение размера программно созданной формы

Отправьте традиционный объект JavaScript вместе с объектом jQuery в том же запросе Ajax

Заполняемая форма Word с полем времени

JQuery / AJAX и PHP - Ошибка с isset () при использовании функции .load ()

Использование переменных в форме

Ответы 1

Другие вопросы по теме

Похожие вопросы