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，这样就不必查找
由于您为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>

如何隐藏小于输入数字的li元素

5 个答案: