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

Мне нужно добавить код JavaScript, чтобы включить автозаполнение в этой форме. Всякий раз, когда флажок установлен, код должен автоматически копировать значения из «Имя доставки» и «Почтовый индекс для доставки» в «Имя для выставления счета» и «Почтовый индекс для выставления счета». Если флажок не установлен, поля «Имя для выставления счетов» и «Почтовый индекс для выставления счетов» должны оставаться пустыми. Почему мой код не работает?

Мои коды HTML и JS приведены ниже:

function billingFunction() {
  if (document.getElementById('same').checked) {
    var shipinfo = document.getElementById('shippingName', 'shippingZip').value;
    var billinfo = document.getElementById('billingName', 'billingZip').value;
    shipinfo = billinfo;
  } else {
    document.getElementById('billingName', 'billingZip').value = '';
  }
}
<h1>JavaScript</h1>
<p> Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>

<form>
  <fieldset>
    <legend>Shipping Information</legend>
    <label for = "shippingName">Name:</label>
    <input type = "text" name = "shipName" id = "shippingName" required><br/>
    <label for = "shippingZip">Zip code:</label>
    <input type = "text" name = "shipZip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>
  <input type = "checkbox" id = "same" name = "same" onchange = "billingFunction()" />
  <label for = "same">Is the Billing Information the Same?</label>

  <fieldset>
    <legend>Billing Information</legend>
    <label for = "billingName">Name:</label>
    <input type = "text" name = "billName" id = "billingName" required><br/>
    <label for = "billingZip">Zip code:</label>
    <input type = "text" name = "billZip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>
  <input type = "submit" value = "Verify" />
</form>

Пожалуйста, отправьте код как фрагмент в вопросе, а не как изображение.

Praneet Dixit 15.12.2020 08:25

Извините, ребята, за предыдущий неправильный вопрос с «картинкой» :)

The king Arthur 15.12.2020 11:59

«Почему мой код не работает?» - Почему вы думаете, что это «не работает»? Что происходит? Что происходит вместо этого? Есть ошибки? Можете ли вы преобразовать части вашего вопроса (разметка, скрипт) в исполняемый фрагмент, который показывает то же поведение, что и ваш настоящий скрипт?

Andreas 15.12.2020 15:24
document.getElementById('shippingName','shippingZip') так .getElementById() не работает. Как следует из названия, он вернет не более одного элемента, а не несколько. Взгляните на .querySelectorAll() (и как работать с возвращенной коллекцией)
Andreas 15.12.2020 15:26

Я понял. Спасибо, но почему это не работает, когда я пытаюсь использовать getElementsByClassName???

The king Arthur 16.12.2020 14:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
5
328
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
function billingFunction() {
  if (document.getElementById('same').checked) {
    var shipinfo = document.getElementById('shippingName').value;
    var billinfo = document.getElementById('shippingZip').value;

    document.getElementById('billingName').value = shipinfo;
    document.getElementById('billingZip').value = billinfo;
  } else {
    document.getElementById('billingName').value = '';
    document.getElementById('billingZip').value = '';
  }
}

использовать это

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