라디오 클릭 반환 document.getElementById (...)는 콘솔에서 null입니다.

Question

글쎄, 나는 이것을 이해할 수 없으며 비슷한 질문/답변을 여기에서 보았습니다. 이것은 단지 작동해야합니다.

다른 기능이있는 페이지에서 동일한 문제가 없으며 뭔가를 클릭하면 기타를 클릭해도 필드가 지워집니다. 우편 번호 TNpostal 필드를 제외한 모든 필드를 복사합니다. 또한 코드 편집기의 필드에 이름 지정 문제가 없는지 확인했습니다. ID 요소가 있습니다. 왜 그렇게 작동하지 않습니까? 여기

<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> 

을 당신은 선택의 오타가 자바 스크립트

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

있어 :

다음은 HTML입니다. 또한 select 변경시 radio을 재설정하는 기능 (resetRadioOnchange)을 추가했습니다. 다음 코드를 시도해보십시오 ... ID의`Corp_Address1` 등 당신의 HTML에 아무런 입력이 없습니다

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>