How to use loop on js to let style.display = "none"

Question

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 onmousemove="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()" onmouseout="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";
    }

Don't store those values in separate variables. Store them in an array and loop over the array. — Ivar, Oct 18 '22 at 07:07

score 0 · Answer 1 · answered Oct 18 '22 at 07:18

0

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";
    }

answered Oct 18 '22 at 07:18

Mr.Lister

422
3
11

I update my question , I use DataGrid_ListItem.length to decide how many ListItem – willy99924 Oct 18 '22 at 07:56

Wasted-O453 Ahmad · Answer 2 · 2022-10-18T07:17:13.767

-1

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

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

edited Oct 18 '22 at 07:17

answered Oct 18 '22 at 07:10

Wasted-O453 Ahmad

26
1
6

document.querySelectorAll('#id4, #id5, #id6').style = none would also achive this – Wasted-O453 Ahmad Oct 18 '22 at 07:11
I try use for (let i = 0; i < DataGrid_ListItem.length; i++) { document.querySelectorAll("tempComboBox_" + i + "_ListItem").style = "none"; } but it's not working – willy99924 Oct 18 '22 at 07:18
@willy99924 Why do you think `document.querySelectorAll("tempComboBox_" + i + "_ListItem").style = "none"` makes sense? Please read the documentation: [`querySelectorAll`](//developer.mozilla.org/en/docs/Web/API/Document/querySelectorAll), [`style`](//developer.mozilla.org/en/docs/Web/API/HTMLElement/style), and see [What do querySelectorAll and getElementsBy\* methods return?](/q/10693845/4642212). – Sebastian Simon Oct 18 '22 at 07:21
Reread my answer please and do as it says – Wasted-O453 Ahmad Oct 19 '22 at 09:40

How to use loop on js to let style.display = "none"

2 Answers2