Javascript 没有在 IE 中触发答案

【问题标题】：Javascript not firing in IEJavascript 没有在 IE 中触发
【发布时间】：2019-09-14 05:48:45
【问题描述】：

由于某种原因，我的函数没有在 IE 中触发。它适用于其他一切，Safari、Firefox、Chrome、Opera、Edge。任何人都可以看到一个具体的问题吗？我想我已经把它缩小到这个特定的功能。所有其他 js 似乎工作得很好。谢谢！

使用 Windows Server 2012 R2

这是有问题的函数：

function mySearch() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('connect-cat');


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

  if (nodes[i].innerHTML.toLowerCase().includes(filter)) {
      nodes[i].style.display = "block";
    } else {
      nodes[i].style.display = "none";
    }
  }
}

页面中使用了一些 HTML，可能不是诊断此问题所必需的，但尽我所能提供。

搜索栏：

<div style="width:100%;margin-left:320px;">
      <input type="text" id="Search" onkeyup="javascript:searching();" Placeholder="Please enter a search term...">&nbsp;</input>
      <input id="lawsonbox" type="checkbox" onchange="javascript:storefront();" style="position:absolute;width:15px;" ><font size="-3" style="margin-left:22px;">Highlight customizable Storefront products</font></input>
  </div>
<br/><br/>

几个可搜索的产品，html：

<div class="connect-cat" style="width:237px;height:350px;position:inherit;float:left;visibility: visible; display: block;">
<a href="CreateUserDocument.aspx?code=ADBUILDER8">
<img style="width:217px;" src="Custom/Themes/standard/Inserts/images/Ad_Print_Thumb.jpg"/>
<br/>
<div id="ptitle">
Ad - Print
<br/>
Customize on Storefront
</div>
<div id="pdesc">
Bring awareness and education
<br/>
to your audience.
</div>
</a>
<div style="display:none;">"print ad"ad print"experience more"experience more campaign"first choice campaign"home health collection"assisted living collection" post-acute rehabilitation services collection"ad"</div>
</div>

<div class="connect-cat" style="width:237px;height:350px;position:inherit;float:left;visibility: visible; display: block;">
<a href="Custom/Themes/standard/Inserts/Forms/1_1_15_Radio_TV sheet.xls">
<img class="sfclass" style="width:217px;" src="Custom/Themes/standard/Inserts/images/Ad_Radio_Thumb.jpg"/>
<br/>
<div id="ptitle">
Ad - Radio
<br/>
Download
</div>
<div id="pdesc">
Work with local station to produce.
<br/>
Must use Society-approved music bed.
</div>
</a>
<div style="display:none;">"radio ad"ad radio"experience more"experience more campaign"first choice campaign"ad"lawson"</div>
</div>

【问题讨论】：

onkeyup="javascript:searching();" 不应该是onkeyup="mySearch();" 吗？
查看String.prototype.includes的兼容性表（IE不支持）
另外，onXXX 属性中不需要javascript:。这仅需要代替 URL，例如 href。
检查浏览器控制台是否有错误。
@Barmar，我尝试了调试器，它只说 mySearch 未定义。我尝试了调试器，但没有成功。

标签： javascript html internet-explorer

【解决方案1】：

首先，修改函数名，确保你使用的是定义好的函数。

其次，参考this article，我们知道includes()方法不支持IE浏览器，所以尝试使用indexof method检查innerhtml是否包含过滤值。

尝试如下修改你的代码：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function searching() {
            var input = document.getElementById("Search");
            var filter = input.value.toLowerCase();
            var nodes = document.getElementsByClassName('connect-cat');


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

                if (nodes[i].innerHTML.toLowerCase().indexOf(filter) !== -1) {
                    nodes[i].style.display = "block";
                } else {
                    nodes[i].style.display = "none";
                }
            }
        }
        function storefront() {

        }
    </script>
</head>
<body>
    <div style="width:100%;margin-left:320px;">
        <input type="text" id="Search" onkeyup="javascript:searching();" Placeholder="Please enter a search term...">&nbsp;</input>
        <input id="lawsonbox" type="checkbox" onchange="javascript:storefront();" style="position:absolute;width:15px;"><font size="-3" style="margin-left:22px;">Highlight customizable Storefront products</font></input>
    </div>
    <br /><br />
    <div class="connect-cat" style="width:237px;height:350px;position:inherit;float:left;visibility: visible; display: block;">
        <a href="CreateUserDocument.aspx?code=ADBUILDER8">
            <img style="width:217px;" src="Custom/Themes/standard/Inserts/images/Ad_Print_Thumb.jpg" />
            <br />
            <div id="ptitle">
                Ad - Print
                <br />
                Customize on Storefront
            </div>
            <div id="pdesc">
                Bring awareness and education
                <br />
                to your audience.
            </div>
        </a>
        <div style="display:none;">"print ad"ad print"experience more"experience more campaign"first choice campaign"home health collection"assisted living collection" post-acute rehabilitation services collection"ad"</div>
    </div>

    <div class="connect-cat" style="width:237px;height:350px;position:inherit;float:left;visibility: visible; display: block;">
        <a href="Custom/Themes/standard/Inserts/Forms/1_1_15_Radio_TV sheet.xls">
            <img class="sfclass" style="width:217px;" src="Custom/Themes/standard/Inserts/images/Ad_Radio_Thumb.jpg" />
            <br />
            <div id="ptitle">
                Ad - Radio
                <br />
                Download
            </div>
            <div id="pdesc">
                Work with local station to produce.
                <br />
                Must use Society-approved music bed.
            </div>
        </a>
        <div style="display:none;">"radio ad"ad radio"experience more"experience more campaign"first choice campaign"ad"lawson"</div>
    </div>
</body>

【讨论】：

简单地使用“indexOf”就像一个魅力。谢谢你的提示。不知道为什么我没有想到使用它。