如何隱藏小於輸入數字的li元素

Question

我有一個將用戶輸入的內容作為數字的表格。 以下是帶數字的無序列表。

<input type="text" id="myInput" onkeyup="myFunction()" autocomplete="off">    
<ul id="myUL">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<script>
  function myFunction(){
    let input = parseInt(document.querySelector('myInput').value);
    let li = document.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
      let number = parseInt(li[i].value);
      if (number < input) {
        li[i].style.display = 'none';
      } else {
        li[i].style.display = '';
      }
    }
  }
</script>

如果這些數字中的任何一個小於輸入，則元素應動態隱藏。 他們沒有躲藏。

[解決了]

function myFunction(){
let input = parseInt(document.querySelector('#myInput').value);
let li = document.getElementsByTagName('li');
for (let i = 0; i < li.length; i++) {
  let number = parseInt(li[i].innerHTML);
  if (number < input) {
    li[i].style.display = 'none';
  } else {
    li[i].style.display = '';
    }
  }
}

Answer 1

您應該使用innerHTML或innerText 。 還要使用document.querySelector('#myInput') 。 並使用Array.from()將li轉換為Array並使用Array.prototype.forEach()循環看起來更好

 function myFunction(){ let input = parseInt(document.querySelector('#myInput').value); let li = Array.from(document.getElementsByTagName('li')); li.forEach(item => { let number = parseInt(item.innerHTML); if (number < input) { item.style.display = 'none'; } else { item.style.display = ''; } }) } 

 <input type="text" id="myInput" onkeyup="myFunction()" autocomplete="off"> <ul id="myUL"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 

Answer 2

getElementsByTagName不返回數組。 我做了Array.from(document.getElementByTagName("li"))以返回一個數組。

另外，您應該使用innerText代替value 。 value僅可用於select ， input和textarea 。

  function myFunction(){ let input = parseInt(document.querySelector('#myInput').value); let li = Array.from(document.getElementsByTagName('li')); for (i = 0; i < li.length; i++) { let number = parseInt(li[i].innerText); if (number < input) { li[i].style.display = 'none'; } else { li[i].style.display = ''; } } } 

 <input type="text" id="myInput" onkeyup="myFunction()" autocomplete="off"> <ul id="myUL"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 

Answer 3

getElementsByTagName將返回帶有所有li的對象。 使用Object.values將它們轉換為array。 它將返回所有li元素的數組QuerySelector是錯誤的。 您必須使用#作為ID

 function myFunction(){ let input = parseInt(document.querySelector('#myInput').value); let li = Object.values(document.getElementsByTagName('li')); for (i = 0; i < li.length; i++) { number = parseInt(li[i].innerHTML); if (number < input) { li[i].style.display = 'none'; } else { li[i].style.display = ''; } }} 

 <input type="text" id="myInput" onkeyup="myFunction()" autocomplete="off"> <ul id="myUL"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 

Answer 4

嘗試使用＃查找帶有查詢選擇器的ID。 同樣，數字在innerText 。

 function myFunction(){
      let input = document.querySelector('#myInput').value;
      let li = document.getElementsByTagName('li');
      for (i = 0; i < li.length; i++) {
        number = parseInt(li[i].innerText); 
        if (number < parseInt(input)) {
          li[i].style.display = 'none';
        }
        else {
          li[i].style.display = '';
        }
      }
    }

Answer 5

• 您可以this.value聯綁定中傳遞this.value ，因此不必查找
• 由於您為ul提供了一個id，因此您最好將其用作選擇器的一部分，以查找關聯的li元素
• 解析innerText ，而不是value因為li元素沒有值
• 您可以使用三元語句來設置顯示屬性

 function myFunction(inputValue) { inputValue = parseInt(inputValue || '0'); let lis = document.querySelectorAll('#myUL li'); lis.forEach(function(li){ let liValue = parseInt(li.innerText); li.style.display = ( liValue < inputValue ? 'none' : ''); }); } 

 <input type="text" id="myInput" onkeyup="myFunction(this.value)" autocomplete="off"> <ul id="myUL"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>