[解決済み] IE 11でコードが実行されない、Chromeでは正常に動作する
2022-04-24 16:15:32
質問
以下のコードは、Chromeでは問題なく実行できますが、Internet Explorer 11では以下のエラーが発生します。
オブジェクトはプロパティまたはメソッド 'startsWith' をサポートしていません。
要素のIDを変数に保存しています。何が問題なのでしょうか?
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
は、JavaScriptの最新バージョンであるES6で標準的に使われているメソッドです。
下記の互換性表を見ると、現在の主要なプラットフォームでサポートされていることがわかります。 ただし Internet Explorerのバージョン
╔═══════════════╦════════╦═════════╦═══════╦═══════════════════╦═══════╦════════╗
║ Feature ║ Chrome ║ Firefox ║ Edge ║ Internet Explorer ║ Opera ║ Safari ║
╠═══════════════╬════════╬═════════╬═══════╬═══════════════════╬═══════╬════════╣
║ Basic Support ║ 41+ ║ 17+ ║ (Yes) ║ No Support ║ 28 ║ 9 ║
╚═══════════════╩════════╩═════════╩═══════╩═══════════════════╩═══════╩════════╝
を実装する必要があります。
.startsWith
を自分で作成します。以下は
ポリフィル
:
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}
関連
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
Vueでルートネスティングを実装する例
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] JavaScriptで文字をASCIIコードに変換する
-
[解決済み] Safari、Chrome、IE、Firefox、Operaのブラウザを検出する方法は?
-
[解決済み] ChromeでコードからJavaScriptのブレークポイントを設定する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
nodejs unhandledPromiseRejectionWarning メッセージ