javascript - 单选按钮在控制台中返回 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

您的选择器中有拼写错误。我还添加了一个函数 (resetRadioOnchange)，用于在更改 select 时重置 radio。尝试以下代码:

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>