javascript エラー「Uncaught ReferenceError: infinity is not defined」の解決方法

作成日 2022.12.03
javascript
javascript

javascriptで、エラー「Uncaught ReferenceError: infinity is not defined」が発生した場合の原因と解決方法を記述してます。無限ループの指定である「Infinity」の「I」に小文字を使用した場合に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.72

Javascript サンプル集はこちら

エラー内容

以下の、「animate」を使用したコードで発生。

<div class="box"></div>

<script>

const elm = document.querySelectorAll('.box');

elm[0].animate(
  // 変化させるスタイル
  [
    { width: '100px' },
    { width: '500px' }
  ],
  // プロパティ
  {
    duration: 1500,
    iterations: infinity,
  }
);

</script>

エラーメッセージ

Uncaught ReferenceError: infinity is not defined

画像

firefox107の場合では、以下のエラーが発生します。

Uncaught ReferenceError: infinity is not defined

画像

safari15.5では、以下のエラーとなります。

ReferenceError: Can't find variable: infinity

画像

原因

「infinity」の「i」が小文字になっているため。大文字にする必要があります。

iterations: Infinity

解決方法

正しく「Infinity」と記述する

<div class="box"></div>

<script>

const elm = document.querySelectorAll('.box');

elm[0].animate(
  // 変化させるスタイル
  [
    { width: '100px' },
    { width: '500px' }
  ],
  // プロパティ
  {
    duration: 1500,
    iterations: Infinity,
  }
);

</script>