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) {
var array = document.getElementsByTagName('td');
for (var a = 0; a < array.length; a++) {
var str = array[a].id;
if (str.startsWith('REP')) {
if (str == elId) {
array[a].style.backgroundColor = "Blue";
array[a].style.color = "white";
} else {
array[a].style.backgroundColor = "";
array[a].style.color = "";
}
} else if (str.startsWith('D')) {
if (str == elId) {
array[a].style.backgroundColor = "Blue";
array[a].style.color = "white";
} else {
array[a].style.backgroundColor = "";
array[a].style.color = "";
}
}
}
}<table>
<tr>
<td id="REP1" onclick="changeClass('REP1');">REPS</td>
<td id="td1"> </td>
</tr>
<tr>
<td id="td1"> </td>
<td id="D1" onclick="changeClass('D1');">Doors</td>
</tr>
<tr>
<td id="td1"> </td>
<td id="D12" onclick="changeClass('D12');">Doors</td>
</tr>
</table>String.prototype.startsWith is a standard method in the most recent version of JavaScript, ES6.
Looking at the compatibility table below, we can see that it is supported on all current major platforms, except versions of Internet Explorer.
╔═══════════════╦════════╦═════════╦═══════╦═══════════════════╦═══════╦════════╗
║ Feature ║ Chrome ║ Firefox ║ Edge ║ Internet Explorer ║ Opera ║ Safari ║
╠═══════════════╬════════╬═════════╬═══════╬═══════════════════╬═══════╬════════╣
║ Basic Support ║ 41+ ║ 17+ ║ (Yes) ║ No Support ║ 28 ║ 9 ║
╚═══════════════╩════════╩═════════╩═══════╩═══════════════════╩═══════╩════════╝
You'll need to implement .startsWith yourself. Here is the polyfill:
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}
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");
}
If this is happening in Angular 2+ application, you can just uncomment string polyfills in polyfills.ts:
import 'core-js/es6/string';