[javascript] Code not running in IE 11, works fine in Chrome

The following code can be run without a problem in Chrome, but throws the following error in Internet Explorer 11.

Object doesn't support property or method 'startsWith'

I am storing the element's ID in a variable. What is the issue?

function changeClass(elId) {_x000D_
  var array = document.getElementsByTagName('td');_x000D_
  _x000D_
  for (var a = 0; a < array.length; a++) {_x000D_
    var str = array[a].id;_x000D_
    _x000D_
    if (str.startsWith('REP')) {_x000D_
      if (str == elId) {_x000D_
        array[a].style.backgroundColor = "Blue";_x000D_
        array[a].style.color = "white";_x000D_
      } else {_x000D_
        array[a].style.backgroundColor = "";_x000D_
        array[a].style.color = "";_x000D_
      }_x000D_
    } else if (str.startsWith('D')) {_x000D_
      if (str == elId) {_x000D_
        array[a].style.backgroundColor = "Blue";_x000D_
        array[a].style.color = "white";_x000D_
      } else {_x000D_
        array[a].style.backgroundColor = "";_x000D_
        array[a].style.color = "";_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
}

<table>_x000D_
  <tr>_x000D_
    <td id="REP1" onclick="changeClass('REP1');">REPS</td>_x000D_
    <td id="td1">&nbsp;</td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td id="td1">&nbsp;</td>_x000D_
    <td id="D1" onclick="changeClass('D1');">Doors</td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td id="td1">&nbsp;</td>_x000D_
    <td id="D12" onclick="changeClass('D12');">Doors</td>_x000D_
  </tr>_x000D_
</table>

Replace the startsWith function with:

yourString.indexOf(searchString, position) // where position can be set to 0

This will support all browsers including IE

Position can be set to 0 for string matching from the start meaning 0th position.

I also recently faced the prob. I solved using ^ which is similar to startwith in jquery. Say,

var str = array[a].id;
if (str.startsWith('REP')) {..........}

we can use

if($("[id^=str]").length){..........}

Here, str is id of element.

As others have said startsWith and endsWith are part of ES6 and not available in IE11. Our company always uses lodash library as a polyfill solution for IE11. https://lodash.com/docs/4.17.4

_.startsWith([string=''], [target], [position=0])

If this is happening in Angular 2+ application, you can just uncomment string polyfills in polyfills.ts:

import 'core-js/es6/string';

Follow this method if problem comes when working with angular2+ projects

I was looking for a solution when i got this error, and it got me here. But this question seems to be specific but the error is not, its a generic error. This is a common error for angular developers dealing with Internet Explorer.

I had the same issue while working with angular 2+, and it got resolved just by few simple steps.

In Angular latest versions, there are come commented codes in the polyfills.ts shows all the polyfills required for the smooth running in Internet Explorer versions IE09,IE10 and IE11

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
//import 'core-js/es6/symbol';
//import 'core-js/es6/object';
//import 'core-js/es6/function';
//import 'core-js/es6/parse-int';
//import 'core-js/es6/parse-float';
//import 'core-js/es6/number';
//import 'core-js/es6/math';
//import 'core-js/es6/string';
//import 'core-js/es6/date';
//import 'core-js/es6/array';
//import 'core-js/es6/regexp';
//import 'core-js/es6/map';
//import 'core-js/es6/weak-map';
//import 'core-js/es6/set';

Uncomment the codes and it would work perfectly in IE browsers

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

But you might see a performance drop in IE browsers compared to others :(

While the post of Oka is working great, it might be a bit outdated. I figured out that lodash can tackle it with one single function. If you have lodash installed, it might save you a few lines.

Just try:

import { startsWith } from lodash;

. . .

    if (startsWith(yourVariable, 'REP')) {
         return yourVariable;        
    return yourVariable;
       }      
     }

text.indexOf("newString") is the best method instead of startsWith.

Example:

var text = "Format";
if(text.indexOf("Format") == 0) {
    alert(text + " = Format");
} else {
    alert(text + " != Format");
}