NEW ARTICLE
Vue warn: Failed to resolve directive: v-if の解決方法
  1. HOME
  2. javascript
  3. javascript エラー「Uncaught SyntaxError: Invalid left-hand side in assignment」の解決方法

javascript エラー「Uncaught SyntaxError: Invalid left-hand side in assignment」の解決方法

javascript エラー「Uncaught SyntaxError: Invalid left-hand side in assignment」の解決方法

javascriptで、エラー「Uncaught SyntaxError: Invalid left-hand side in assignment」が発生した場合の原因と解決方法を記述してます。演算子の間違いやイベントの設定忘れなどで発生します。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 108.0.5359.125
Javascript サンプル集はこちら

エラー内容

以下のコードで発生。
※その他に同一のエラーがでるパターンは後述してます。

let x = 1;
let y = 2;

if (x = 1 || y = 3) {
  console.log('success');
}

エラーメッセージ

Uncaught SyntaxError: Invalid left-hand side in assignment

画像

firefox（バージョン107）でも、同様のエラーとなります。

Uncaught SyntaxError: invalid assignment left-hand side

画像

原因

代入演算子「=」ではなく、演算子「==」を指定する必要があるため

解決方法

演算子「==」を使用する。

let x = 1;
let y = 2;

if (x == 1 || y == 3) {
  console.log('success');
}

実行結果

その他

イベントのつけ忘れ

以下のように、イベントを指定するのを忘れた場合でも同じエラーが発生します。

<p id="hoge">sample</p>

<script>

document.getElementById("foo") = function (){
    console.log("クリックされました")
}
// Uncaught ReferenceError: Invalid left-hand side in assignment

</script>

firefoxでは、以下のエラーとなります。

Uncaught ReferenceError: cannot assign to function call

イベントを指定することで解決します。

<p id="hoge">sample</p>

<script>

document.getElementById("hoge").onclick = function (){
    console.log("クリックされました")
}

</script>

比較演算子

比較演算子の記述間違いでも同じエラーが発生します。

if (1 =< 2) {
  console.log('sample')
}

// Uncaught ReferenceError: Invalid left-hand side in assignment

firefoxでは、以下のエラーとなります。

Uncaught SyntaxError: invalid assignment left-hand side

正しくは「<=」となります。

if (1 <= 2) {
  console.log('sample')
}

ちなみに変数を使用した場合は、別のエラーとなります。

let x = 1;
let y = 2;

if (x =< y) {
  console.log('success');
}

// Uncaught SyntaxError: Unexpected token '<'

firefoxでは、以下のエラーとなります。

Uncaught SyntaxError: expected expression, got '<'