Javascript not firing in IE

Question

For some reason, my function isn't firing in IE. It works in everything else, Safari, Firefox, Chrome, Opera, Edge. Can anyone see a specific issue with this? I think I've narrowed it down to this specific function. All other js seems to be working just fine. Thanks!

Uses Windows Server 2012 R2

this is the function in question:

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";
    }
  }
}

A bit of HTML used in the page, probably not necessary to diagnose this problem but trying to give as much as I can.

The search bar:

<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/>

A couple of searchable products, 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();"` shouldn't that be `onkeyup="mySearch();"` ? — Barmar, Apr 24 '19 at 20:53
Check the compatibility table for [`String.prototype.includes`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) (It's not supported by IE) — Sterling Archer, Apr 24 '19 at 20:54
Also, you don't need `javascript:` in `onXXX` attributes. That's only needed in place of URLs, like in `href`. — Barmar, Apr 24 '19 at 20:54
@Barmar, I tried the debugger and all it says is mySearch is not defined. I tried the debugger but that got me nowhere. — Scott Ecklund, Apr 24 '19 at 21:11
@SterlingArcher I'll look into this as I'm guessing this is probably the issue. — Scott Ecklund, Apr 24 '19 at 21:11
There weren't any errors when the function was loading? Those errors would explain why the function isn't defined. — Barmar, Apr 24 '19 at 21:15
See [this question](https://stackoverflow.com/questions/55837969/javascript-not-executing-using-xampp/55838066?noredirect=1#comment98340512_55838066) He was also having trouble loading a .js file in IE, it was due to a security setting. — Barmar, Apr 24 '19 at 21:16
@Barmar Looking back, I had to move past the first error. Apologies, I don't work in I.E. ever. I get the following two errors: Unable to get property 'value' of undefined or null reference - Line: 1342, Column: 3 Object doesn't support property or method 'includes' - Line: 1348, Column: 3 The funciton begins on line 1340. — Scott Ecklund, Apr 24 '19 at 21:22
The first error means that `document.getElementById("Search");` isn't finding the element for some reason. The second error is what Sterling Archer told you about. — Barmar, Apr 24 '19 at 21:29
See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element for the first error. — Barmar, Apr 24 '19 at 21:30

score 0 · Answer 1 · answered Apr 25 '19 at 07:27

First, modify the function name, make sure you are using the defined function.

Second, with refer to this article, we know that the includes() method not support IE browser, so, try to use the indexof method to check whether the innerhtml contains the filter value.

Try to modify your code as below:

<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>

Simply using "indexOf" worked like a charm. Thanks for the tip. Not sure why I didn't think of using that. — Scott Ecklund, Apr 26 '19 at 20:32

Javascript not firing in IE

1 Answers1