JavaScript не пополняет этикетку

Question

В этом коде я пытаюсь добавить метку, если пользователь установил флажок «Радио», и удалить текст, если пользователь снял метку, но она не работает. файл HTML

function billingFunction()
{
    if (document.getElementById('same').value==true)
        {
        var name = document.getElementById('shippingName').innerHTML;
        var zip=document.getElementById('shippingZip').innerHTML;
        document.getElementById('billingName').innerHTML=name;
        document.getElementById('billingZip').innerHTML= zip;
    else
        {
        document.getElementById('billingName').innerHTML="";
        document.getElementById('billingZip').innerHTML= "";
        }

}

Answer 1

просто используйте входные имена с идентификатором формы и событием oninput

const myForm = document.getElementById('my-form')
  ;
myForm.same.oninput=()=>
  {
  myForm.billingName.value = (myForm.same.checked) ?  myForm.shippingName.value : ''
  myForm.billingZip.value  = (myForm.same.checked) ?  myForm.shippingZip.value  : ''
  }

label { display: block; margin: .7em; }

<form id="my-form">
  
  <fieldset>
    <legend>Shipping Information</legend>
    <label>Name: <input type="text" name="shippingName"></label>
    <label>Zip Code: <input type="text" name="shippingZip"></label>
  </fieldset>

  <label><input type="checkbox" name="same"> Is the Billing Information the Same ? </label>

  <fieldset>
    <legend>Billing Information</legend>
    <label>Name: <input type="text" name="billingName"></label>
    <label>Zip Code: <input type="text" name="billingZip"></label>
  </fieldset>

</form>

Answer 2

Если вы хотите изменить метку, попробуйте этот код.

function billingFunction() {
  if (document.getElementById('same').checked) {
    var name = document.getElementById('shippingName').innerHTML;
    var zip = document.getElementById('shippingZip').innerHTML;
    document.getElementById('billingName').innerHTML = name;
    document.getElementById('billingZip').innerHTML = zip;
  } else {
    document.getElementById('billingName').innerHTML = "";
    document.getElementById('billingZip').innerHTML = "";
  }

}

<div>
  <label id="shippingName">Name</label>
  <input />
</div>

<div>
  <label id="shippingZip">ZIP</label>
  <input />
</div>

<div>
  <input id="same" type="checkbox" onchange="billingFunction()" />
  <label for="same">Same?</label>
</div>

<div>
  <label id="billingName"></label>
  <input />
</div>

<div>
  <label id="billingZip"></label>
  <input />
</div>

Если вы хотите установить входное значение при установленном флажке, попробуйте этот код

function billingFunction() {
  if (document.getElementById('same').checked) {
    var name = document.getElementById('shippingName').value;
    var zip = document.getElementById('shippingZip').value;
    document.getElementById('billingName').value = name;
    document.getElementById('billingZip').value = zip;
  } else {
    document.getElementById('billingName').value = "";
    document.getElementById('billingZip').value = "";
  }
}

setInterval(function() {
  if (document.getElementById('same').checked) {
    var name = document.getElementById('shippingName').value;
    var zip = document.getElementById('shippingZip').value;

    document.getElementById('billingName').value = name;
    document.getElementById('billingZip').value = zip;
  }
}, 500);

<div>
  <label for="shippingName">Name</label>
  <input id="shippingName" />
</div>

<div>
  <label for="shippingZip">ZIP</label>
  <input id="shippingZip" />
</div>

<div>
  <input id="same" type="checkbox" onchange="billingFunction()" />
  <label for="same">Same?</label>
</div>

<div>
  <label for="billingName">Name</label>
  <input id="billingName" />
</div>

<div>
  <label for="billingZip">ZIP</label>
  <input id="billingZip" />
</div>