Мне нужно добавить код 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>
Извините, ребята, за предыдущий неправильный вопрос с «картинкой» :)
«Почему мой код не работает?» - Почему вы думаете, что это «не работает»? Что происходит? Что происходит вместо этого? Есть ошибки? Можете ли вы преобразовать части вашего вопроса (разметка, скрипт) в исполняемый фрагмент, который показывает то же поведение, что и ваш настоящий скрипт?
document.getElementById('shippingName','shippingZip')
так .getElementById()
не работает. Как следует из названия, он вернет не более одного элемента, а не несколько. Взгляните на .querySelectorAll()
(и как работать с возвращенной коллекцией)
Я понял. Спасибо, но почему это не работает, когда я пытаюсь использовать getElementsByClassName???
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 = '';
}
}
использовать это
Пожалуйста, отправьте код как фрагмент в вопросе, а не как изображение.