如何使用for循环在JavaScript上创建搜索栏？_Javascript_Html_Css

如何使用for循环在JavaScript上创建搜索栏？

javascript html css

如何使用for循环在JavaScript上创建搜索栏？,javascript,html,css,Javascript,Html,Css,我有以下HTML和JS： <body> <div class = "to_do_list"> <div class = "add"></div> <div id = "delete"></div> <input id = "input

我有以下HTML和JS：

<body>

    <div class = "to_do_list">

            <div class = "add"></div>
            <div id = "delete"></div>
                
            <input id = "input" type = "text" name = "">

            <div id = "add_button"></div>

            <div class = "find"></div>
            <input id = "find_form" type = "text" placeholder = "Find">
            <button id = "find_button" type = "submit">Start</button>

            <div class = "thing_container"> </div>

    </div>
    
</body>


开始

let storage=[]；
addButton.onclick=（）=>{
让newElement=document.createElement（“li”）；
newElement.style.background='purple'；
newElement.textContent=input.value；
thingContainer.appendChild（新元素）；
存储。推送（新元素）；
}
findButton.onclick=（）=>{
for（设i=0；i=0）{
存储[i].style.display=“块”；
}
否则{
存储[i].style.display=“无”；
}
}

通过单击

add按钮

代码创建一个

li

元素，将

input

中的文本追加到该元素，并将

li

元素追加到

thingContainer

中，然后追加到数组中，名为

storage

所以，在最后一段代码（onclick on findButton）中，当我将某个索引（例如1）放在方括号中时，它是有效的，但当我以这里的方式这样做时，它就不起作用了。你能帮助hot修复它吗

我会感谢你的回答。

ghr

请参见下面的片段

let storage=[]；
让addButton=document.getElementById（'add_button'）；
让findButton=document.getElementById（'find_button'）；
让thingContainer=document.getElementById（'thing_container'）；
addButton.onclick=（）=>{
让newElement=document.createElement（“li”）；
newElement.style.background=“紫色”；
newElement.textContent=input.value；
thingContainer.appendChild（新元素）；
存储。推送（新元素）；
};
findButton.onclick=（）=>{
for（设i=0；i=0）{
存储[i].style.display=“块”；
}否则{
存储[i].style.display=“无”；
}
}
}；


添加
开始

谢谢兄弟，这很有帮助。

    let storage = [];

    addButton.onclick = () => {


       let newElement = document.createElement("li");

       newElement.style.background = 'purple';
       newElement.textContent = input.value;
       thingContainer.appendChild(newElement);

       storage.push(newElement);


   }

      findButton.onclick = () => {

        for (let i = 0; i < storage.length; i++) {

           if (storage[i].textContent.indexOf(find_form.value) >= 0) {
              storage[i].style.display = "block";
           }

           else {
              storage[i].style.display = "none";
          }
   }