I want use loop to run the following code but i get Cannot read properties of undefined (reading 'display') on chrome

    tempComboBox_0_ListItem.style.display = "none";
    tempComboBox_1_ListItem.style.display = "none";
    tempComboBox_2_ListItem.style.display = "none";

This is loop code

for (let i = 0; i < DataGrid_ListItem.length; i  )
    {
        "tempComboBox_"   i   "_ListItem".style.display == "none";
    }

This is ascx code

<div onm ousemove="mouseMove_ListItem()" id="ListItem" style="border-right: #0099cc 1px solid; padding-right: 1px; border-top: medium none; overflow-y: scroll; display: none; scrollbar-face-color: #c9ddf5; border-left: #0099cc 1px solid; width: 300px; scrollbar-shadow-color: #0099cc; scrollbar-3dlight-color: #0099cc; scrollbar-arrow-color: #0099cc; scrollbar-track-color: #f0f8ff; border-bottom: #0099cc 1px solid; scrollbar-darkshadow-color: #f0f8ff; height: 100px; background-color: #f4f8ff"
onclick="onClick_ListItem()" onm ouseout="mouseout_ListItem()" runat="server">
<asp:DataGrid ID="DataGrid_ListItem" runat="server" AutoGenerateColumns="False" Width="100%"></asp:DataGrid>

I use DataGrid_ListItem.length to decide how many ListItem

Can someone can tell me why it is wrong?

Thanks

update: I revise this to answer my queation

for (let i = 0; i < DataGrid_ListItem.length; i  )
    {
        var ListItem1 = eval("document.all."   "tempComboBox_"   i   "_ListItem");
        ListItem1.style.display = "none";
    }

CodePudding user response：

So using the loop that you have already you can do it this way. That is if your DataGrid_ListItem is an array of the elements that you are trying to add the style to.

for (let i = 0; i < DataGrid_ListItem.length; i  )
    {
        DataGrid_ListItem[i].style.display == "none";
    }

CodePudding user response：

You can use forEach() method to achieve the desired result.

document.querySelectorAll('#id, #id1, #id2').forEach(item => {
    item.style = 'none';
})