Need to populate a textfield with email ids based on the checkbox checked for different towers-CodePudding

I have 4 towers and I need checkboxes for each of them. Based on checking any combnation of them the 'txtNotifTo' textbox should get populated with the respective group of email ids for each tower selected.

Please help me find out what is going wrong in this code.

When the checkbox is checked, I get this error:

0x800a138f - JavaScript runtime error: Unable to get property 'getElementsByTagName' of undefined or null reference*

function getChNotifValue() {
       
  var listItems = document.getElementById("txtTowerValue").getElementsByTagName("input");
  var cb1 = listItems[0];
  var cb2 = listItems[1];
  var cb3 = listItems[2];
  var cb4 = listItems[3];
  var cb5 = listItems[4];                        

  var emailaddress = document.getElementById('<%=txtNotifTo.ClientID%>');
  // var email = [];
                  
  var emailList = [];

  if (cb1.checked) {
    emailList.push("[email protected]");
  } else {
    emailList = removeEmail(emailList, "[email protected]");
  }
  if (cb2.checked) {
    emailList.push("[email protected]");
  } else {
    emailList = removeEmail(emailList, "[email protected]");
  }
  if (cb3.checked) {
    emailList.push("[email protected]");
  } else {
    emailList = removeEmail(emailList, "[email protected]");
  }
  if (cb4.checked) {
    emailList.push("[email protected]");
  } else {
    emailList = removeEmail(emailList, "[email protected]");
  }
  if (cb5.checked) {
    emailList.push("[email protected]");
  } else {
    emailList = removeEmail(emailList, "[email protected]");
  }

  emailaddress.value = emailList.join(', '); // Concatenate the email address to NotifTo variable
}

THE HTML CODE:

<tr>
  <td  style="border-color: lightblue">
    <asp:Label runat="server" ID="Label21" Font-Bold="true" Text="To" />
  </td>
  <td>
    <asp:TextBox runat="server" Width="700px" SkinID="EmailTextbox" ID="txtNotifTo" />
  </td>
</tr>

<asp:CheckBoxList ID="txtTowerValue" runat="server" SkinID="EmailTextbox" Font-Size="14px" Width="580px" Height="30px" BorderStyle="None" onClick="getChNotifValue()" >  
  <asp:ListItem Text="I1" Value="ch1" />
  <asp:ListItem Text="I2" Value="ch2" />
  <asp:ListItem Text="I3" Value="ch3" />
  <asp:ListItem Text="I4" Value="ch4" />
  <asp:ListItem Text="I5" Value="ch5" />                               
</asp:CheckBoxList>

I altered the code in the Javascript function and added the below code instead as txtNotifTo is a ASP.NET server control.

var listItems = document.getElementById('<%=txtNotifTo.ClientID%>').getElementsByTagName("input");

When I ran the code after this I am getting this error.

0x800a138f - JavaScript runtime error: Unable to get property 'checked' of undefined or null reference

CodePudding user response：

Well, using a jQuery selector would be easier.

but, your code will look like this:

                ckList = document.getElementById('<%= txtTowerValue.ClientID %>')
                ckBoxInList = ckList.getElementsByTagName("INPUT")

                if (ckBoxInList[0].checked) {
                    alert("Check box "   ckBoxInList[0].value   " is checked")
                }

                if (ckBoxInList[1].checked) {
                    alert("Check box "   ckBoxInList[1].value   " is checked")
                }