JavaScript ReferenceError – Invalid assignment left-hand side

0 0 1 minute read

This JavaScript exception invalid assignment left-hand side occurs if there is a wrong assignment somewhere in code. A single “=” sign instead of “==” or “===” is an Invalid assignment.

Message:

ReferenceError: invalid assignment left-hand side

Error Type:

ReferenceError

Cause of the error: There may be a misunderstanding between the assignment operator and a comparison operator.

Basic Example of ReferenceError – Invalid assignment left-hand side, run the code and check the console

Example 1:

Javascript

if (Math.PI = 10 || Math.PI = 5) { 
    console.log("Inside Loop");
}

Output:

ReferenceError: Invalid left-hand side in assignment

Example 1: In this example, “=” operator is misused as “==”, So the error occurred.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body style="text-align: center;">
    <h1 style="color: green;">
        zambiatek
    </h1>
    <p>
        JavaScript ReferenceError -
        Invalid assignment left-hand side
    </p>
 
    <button onclick="Geeks();">
        click here
    </button>
    <p id="GFG_DOWN"></p>
 
    <script>
        let el_down = document.getElementById("GFG_DOWN");
        function Geeks() {
            try {
                if ((Math.PI = 10 || Math.PI = 5)) {
                    document.write("Inside Loop");
                }
                el_down.innerHTML =
                    "'Invalid assignment left-hand side'" +
                    " error has not occurred";
            } catch (e) {
                el_down.innerHTML =
                    "'Invalid assignment left-hand side'" +
                    "error has occurred";
            }
        }
    </script>
</body>
</html>

Output:

Example 2: In this example, the + operator is used with the declaration, So the error has not occurred.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Invalid assignment left-hand side</title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;">
        zambiatek
    </h1>
    <p>
        JavaScript ReferenceError -
        Invalid assignment left-hand side
    </p>
 
    <button onclick="Geeks();">
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
 
    <script>
        let el_down = document.getElementById("GFG_DOWN");
        function Geeks() {
            try {
                let str = 'Hello, '
                    + 'Geeks'; // Error Here
                el_down.innerHTML =
                    "'Invalid assignment left-hand side'" +
                    "error has not occurred";
            } catch (e) {
                el_down.innerHTML =
                    "'Invalid assignment left-hand side'" +
                    "error has occurred";
            }
        } 
    </script>
</body>
</html>