Javascript未检测div是否正确为空

我用的是Americommerce，他们什么都用widget，我有一个widget，显示用户最近查看的产品，但当他们还没有查看任何内容时，该点就是空的

我想显示一条消息。我遇到的问题是检测小部件是否为空。我尝试用一个

div（#cond）

来包装小部件，但是没有用，我尝试使用JavaScript来检查类

ul.side_carousel

是否存在，以及

div#cond

中是否有任何内容。不管我做什么，我都不能让它正常工作

下面的脚本是我得到的最接近的脚本。在重新访问站点时，div会显示脚本中的“无需显示的项目”消息，但如果我单击某个产品，然后返回主页，div不再是空的，它会显示最近查看的产品（这很好！），但它也会显示“无需显示的项目”消息（这很糟糕），我不知道为什么会出现这种情况，因为div不再为null

<div class="col-sm-2 side hidden-xs hidden-sm">      
    <h3>Recently Viewed:</h3>
    <div id="cond">
      <ac:widget id="CAROUSEL23626" type="Carousel" scrollby="4" displayorientation="Vertical" enablemergecode="True" categoryid="293" repeatabletype="RecentlyViewedItems" rotatorstartdate="10/23/2019" productlistid="9" displaycount="8">
        <ac:visibilityarea id="dvControl">
          ##INCLUDESTYLESHEET[/store/inc/bxslider/jquery.bxslider.css]##

          <ac:layoutarea id="Layout">              
            <ul class="side-carousel">$$GROUP$$</ul>             
          </ac:layoutarea>

          <ac:layoutarea id="Group">
            $$ITEM$$
          </ac:layoutarea>

          <ac:layoutarea id="Item">
            <li>
              <!--$$PRODUCTNAME$$-->

              $$PHOTOWITHLINK$$
              <div class="FeaturedItemsRating">$$OVERALLRATING$$</div>
              <div class="saleprice">$$PRICE$$</div>
            </li>
          </ac:layoutarea>


          <ac:layoutarea id="Script">
            <script>
              $(function () {
                $("$$SELECTOR$$ ul").bxSlider({
                  minSlides: 4,
                  maxSlides: $$VISIBLESLIDES$$,
                  moveSlides: $$SCROLLBY$$,
                  mode: '$$ORIENTATION$$',
                  slideWidth: $$WIDTH$$,
                  slideMargin: 10
                });
              });
            </script>

          </ac:layoutarea>

          ##INCLUDESCRIPTBOTTOM[/store/inc/bxslider/jquery.bxslider.js]##
        </ac:visibilityarea>
      </ac:widget>


    </div>
     <script>
      var bond_div = document.getElementById("CAROUSEL23626");
      var cond_div = document.getElementById("cond");
      if (bond_div === null) {
        cond_div.innerHTML = "<H3>No Items to Display</H3>";
      }  
    </script>
    $$CAROUSEL23626$$
  </div>  

最近浏览：
##INCLUDESTYLESHEET[/store/inc/bxslider/jquery.bxslider.css]##
$$GROUP$$
$$项$$

$$PHOTOWITHLINK$$
$$总体增长率$$
$$价格$$

$（函数（）{
$（“$$SELECTOR$$ul”）.bxSlider({
米斯利德斯：4，
maxSlides:$$VISIBLESLIDES$$，
移动幻灯片：$$SCROLLBY$$，
模式：“$$方向$$”，
滑动宽度：$$宽度$$，
幻灯片摘要：10
});
});
##includeDescriptBottom[/store/inc/bxslider/jquery.bxslider.js]##
var bond_div=document.getElementById（“CAROUSEL23626”）；
var cond_div=document.getElementById（“cond”）；
if（bond_div==null）{
cond_div.innerHTML=“没有要显示的项目”；
}  
$$CAROUSEL23626$$

bond\u div

仅当div根本不存在时才会为

null

。如果要检查它是否为空，则需要测试它的

innerText

if (bond_div.innerText.trim() == "") {
  cond_div.innerHTML = "<h3>No Items to Display</h3>";
}

if（bond\u div.innerText.trim（）=“”）{
cond_div.innerHTML=“没有要显示的项目”；
}

我使用了

innerText

而不是

innerHTML

，因为它看起来有很多HTML标记

---

.trim（）

删除值周围的所有空格，因为HTML标记周围有空格和换行符。

我试过了，但现在在一次新的访问中，该div是空的，没有显示任何消息。脚本在页面上的位置是否会影响这一点？我不知道还要检查什么该脚本必须在元素之后，或者您需要在

窗口中运行它。onload

函数。您在JavaScript控制台中是否看到任何错误？是的，我刚刚检查了错误有一个未捕获的语法错误：无法读取nullSee的属性“innerText”