如何检测标签在Javascript中为空？

Posted 2023-02-01

我正在尝试创建一个仅使用javascript和CSS来显示结果的简单搜索框，当搜索输入为空时，我的代码无法正常响应，这是一个问题。

当有匹配结果时，搜索工作正常，但是，如果没有找到匹配项，我想显示一条消息“无结果”。

我正在使用的html代码如下：

在标题标签中：

        <div class="searchDiv">
            <input onkeyup="searchAction()" name="main search" placeholder="بحث" type="text" />
            <img src="images/research.png" alt="search"/>
        </div>

正文：1. p标签，显示“无结果消息”2.结果卡最初都显示=“ none”

<div class="searchResults" style="display:flex;">
            <p id="noResults" style="display: none;">لا يوجد نتائج</p>
            <div data-name="كرات البطاطا" class="cardResult cook">
                <img src="images/balls.jpg" alt="كرات البطاطا">
                <a href="#">وصفة كرات البطاطا</a>
            </div> 
            <div data-name="كرات البطاطا" class="cardResult cook">
                <img src="images/balls.jpg" alt="كرات البطاطا">
                <a href="#">وصفة كرات البطاطا</a>
            </div> 
            <div data-name="كرات البطاطا" class="cardResult cook">
                <img src="images/balls.jpg" alt="كرات البطاطا">
                <a href="#">وصفة كرات البطاطا</a>
            </div> 

问题是，一旦没有消息结果显示它永远不会消失，我正在使用以下JS代码：

function searchAction(event)
var Input = this.event.target.value;
var ResultsCards= document.querySelectorAll('.cardResult');
var ResultsDiv = document.querySelector('.searchResults');
var noResult = document.querySelector('#noResults');
noResult.style.display="none";
ResultsCards.forEach(card=>
        const cardText = card.getElementsByTagName('a')[0].text;
        if(cardText.indexOf(Input)>-1 && Input!=null && Input!="") 
            noResults.style.display="none";
            card.style.display="flex"
         else
            noResults.style.display="none";
            card.style.display="none"
        

        if(ResultsDiv.innerText == "")
            noResults.style.display="block";
        
    )

答案

用'.value'替换'.innerText'，然后它应该可以工作。

if(ResultsDiv.value == "")
  code;

输入标签没有innerhtml或内部任何内容，因为它们没有结束标签。输入的内容在value属性中。

<input value="foo">

将为您提供内容为'foo'的输入。