ラジオをクリックすると戻りますdocument.getElementById（...）はコンソールでnullです

Question

これはわかりませんが、私はここで同様の質問/回答を見ました。これはうまくいくはずです。

私は他の機能を持っていて、問題なく動作していて、クリックするとフィールドをクリアすることもあります。郵便番号TNpostalフィールド以外のすべてのフィールドがコピーされます。また、コードエディタのフィールドに名前の問題がないことも確認しました。 ID要素はそこにありますがなぜそれは機能しませんか？ここで

はHTMLです：

<div class="form-group"> 
    <label for="Corp_Address1" class="col-sm-2 control-label">*Address:  </label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="Corp_Address1" name="Corp_Address1" maxlength="80"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="Corp_Address2" class="col-sm-2 control-label">Address 2:</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="Corp_Address2" name="Corp_Address2" maxlength="50"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="Corp_City" class="col-sm-2 control-label">*City:</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="Corp_City" name="Corp_City" maxlength="50"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="Corp_Province" class="col-sm-2 control-label">*Province: </label> 
    <div class="col-sm-10"> 
     <select name="Corp_Province" class="form-control" id="Corp_Province"> 
      <option id="CAN-AB" value="AB" selected>Alberta</option>       
     </select> 
    </div> 
</div>   
<div class="form-group"> 
    <label for="Corp_Postal" class="col-sm-2 control-label">*Postal Code:</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="Corp_Postal" name="Corp_Postal" maxlength="7"> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-sm-10"> 
     <div class="radio"> 
      <label> 
       <input name="TNbizaddressoption" type="radio" id="TNbizaddressoption0" value="Same as Corporate Address" onClick="checkTNbizadd()"> 
       Same as Registered Office Address   
      </label>    
      <label class="marg20pxLeft"> 
       <input name="TNbizaddressoption" type="radio" id="TNbizaddressoption2" value="Other" onClick="checkTNbizadd()"> 
       Other (provide below) 
      </label> 
     </div> 
    </div> 
</div> 
<div class="col-sm-12" style="margin-bottom: 2em;">If Other, complete the information below.</div>   

<div class="form-group"> 
    <label for="TNaddress" class="col-sm-2 control-label">*Address:</label> 
    <div class="col-sm-10"> 
     <input name="TNaddress" type="text" class="form-control" id="TNaddress" maxlength="100"> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="TNcity" class="col-sm-2 control-label">*City:</label> 
    <div class="col-sm-10"> 
     <input name="TNcity" type="text" class="form-control" id="TNcity" maxlength="60"> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="TNProv" class="col-sm-2 control-label">*Province: </label> 
    <div class="col-sm-10"> 
     <select name="TNProv" class="form-control" id="TNProv"> 
      <option id="CAN-AB" value="AB" selected>Alberta</option>       
     </select> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="TNpostal" class="col-sm-2 control-label">*Postal Code:</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" name="TNpostal" id="TNpostal"> 
    </div> 
</div> 

ここでは、セレクタでタイプミスを持っているのJavascript

function checkTNbizadd() { 
    var i; 
    var TNbizaddressoption = document.querySelectorAll('input[name="TNbizaddressoption"]'); 
    //checking which radio button selected 
    for (i = 0; i < TNbizaddressoption.length; i++) { 

     if (TNbizaddressoption[i].checked == true) { 

      switch(i){ 
      case 0: 
       document.getElementById("TNaddress").value = document.getElementById("Corp_Address1").value;  
       document.getElementById("TNcity").value = document.getElementById("Corp_City").value; 
       document.getElementById("TNprov").value = document.getElementById("Corp_Province").value; 
       document.getElementById("TNpostal").value = document.getElementById("Corp_Postal").value; 
       break; 

      case 1: 
       document.getElementById("TNaddress").value = '';  
       document.getElementById("TNcity").value = ''; 
       document.getElementById("TNpostal").value = '';  
       break; 
      } 
     } 
    } 
} 

Answer 1

です。私はまたselectの変更時にradioをリセットする機能（resetRadioOnchange）を追加しました。

function checkTNbizadd() { 
 
var i; 
 
var TNbizaddressoption = document.querySelectorAll('input[name="TNbizaddressoption"]'); 
 
//checking which radio button selected 
 
for (i = 0; i < TNbizaddressoption.length; i++) { 
 

 
if (TNbizaddressoption[i].checked == true) { 
 

 
switch(i) 
 
{ 
 
    case 0: 
 
    document.getElementById("TNaddress").value = document.getElementById("Corp_Address1").value;  
 
    document.getElementById("TNcity").value = document.getElementById("Corp_City").value; 
 
    document.getElementById("TNProv").value = document.getElementById("Corp_Province").value; 
 
    document.getElementById("TNpostal").value = document.getElementById("Corp_Postal").value; 
 
    break  
 

 
    case 1: 
 
    document.getElementById("TNaddress").value = '';  
 
    document.getElementById("TNcity").value = ''; 
 
    document.getElementById("TNpostal").value = '';  
 
    break 
 
    } 
 

 
    } 
 
} 
 

 
} 
 

 
function resetRadioOnchange(){ 
 
    var ele = document.querySelectorAll('input[name="TNbizaddressoption"]'); 
 
    for(var i=0;i<ele.length;i++) 
 
     ele[i].checked = false; 
 
}

<div class="form-group"> 
 
    <label for="Corp_Address1" class="col-sm-2 control-label">*Address:  </label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="Corp_Address1" name="Corp_Address1" maxlength="80"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="Corp_Address2" class="col-sm-2 control-label">Address 2:</label> 
 
    <div class="col-sm-10"> 
 
    <input type="text" class="form-control" id="Corp_Address2" name="Corp_Address2" maxlength="50"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="Corp_City" class="col-sm-2 control-label">*City:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="Corp_City" name="Corp_City" maxlength="50"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="Corp_Province" class="col-sm-2 control-label">*Province: </label> 
 
    <div class="col-sm-10"> 
 
    <select name="Corp_Province" class="form-control" id="Corp_Province" onchange="resetRadioOnchange()"> 
 
     <option id="CAN-AB" value="AB" selected>Alberta</option> 
 
     <option id="CAN-AB2" value="AB2">Alberta 2</option></select> 
 
    </div> 
 
    </div>   
 
<div class="form-group"> 
 
    <label for="Corp_Postal" class="col-sm-2 control-label">*Postal Code:</label> 
 
    <div class="col-sm-10"> 
 
    <input type="text" class="form-control" id="Corp_Postal" name="Corp_Postal" maxlength="7"> 
 
</div> 
 
</div> 
 

 
<div class="form-group"> 
 
<div class="col-sm-10"> 
 
<div class="radio"> 
 
<label> 
 
<input name="TNbizaddressoption" type="radio" id="TNbizaddressoption0" value="Same as Corporate Address" onClick="checkTNbizadd()"> 
 
Same as Registered Office Address   
 
</label>    
 
    <label class="marg20pxLeft"> 
 
    <input name="TNbizaddressoption" type="radio" id="TNbizaddressoption2" value="Other" onClick="checkTNbizadd()"> 
 
    Other (provide below) 
 
    </label> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="col-sm-12" style="margin-bottom: 2em;">If Other, complete the information below.</div>   
 

 
<div class="form-group"> 
 
    <label for="TNaddress" class="col-sm-2 control-label">*Address:</label> 
 
    <div class="col-sm-10"> 
 
    <input name="TNaddress" type="text" class="form-control" id="TNaddress" maxlength="100"> 
 
</div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="TNcity" class="col-sm-2 control-label">*City:</label> 
 
    <div class="col-sm-10"> 
 
    <input name="TNcity" type="text" class="form-control" id="TNcity" maxlength="60"> 
 
</div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="TNProv" class="col-sm-2 control-label">*Province: </label> 
 
    <div class="col-sm-10"> 
 
    <select name="TNProv" class="form-control" id="TNProv"> 
 
    <option id="CAN-AB" value="AB" selected>Alberta</option> 
 
    <option id="CAN-AB2" value="AB2">Alberta 2</option>       
 
    </select> 
 
</div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="TNpostal" class="col-sm-2 control-label">*Postal Code:</label> 
 
    <div class="col-sm-10"> 
 
    <input type="text" class="form-control" name="TNpostal" id="TNpostal"> 
 
</div> 
 
</div>