单选单击返回document.getElementById（...）在控制台中为null

Question

Well, I can't figure this out and I did look at similar questions/answers here. This should just work.

I have other functions on the page that are the same that worked no problem and it even clears the field when you click, Other if there was something there. It copies all the fields except the postal code TNpostal field. I also verified there are no naming problems with the fields in a code editor. The ID element is there so why doesn't it work?

Here's the 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> 

Here's the 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

You have typos in the selector. I also added a function ( resetRadioOnchange ) to reset radio on changing the select . Try the following code:

 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>