CODEWITHSUNDEEP
javascript
John
John

Reputation: 19

Why do I get Uncaught SyntaxError: Invalid left-hand side in assignment at HTMLButtonElement.?

let knopkes = document.querySelectorAll(`button`);
let score = document.querySelector(`#score`)
let seven = knopkes[0];
let eight = knopkes[1];
let nine = knopkes[2]
let daugyba = knopkes[3]
let four = knopkes[4]
let five = knopkes[5]
let six = knopkes[6];
let minusas = knopkes[7];
let one = knopkes[8];
let two = knopkes[9];
let three = knopkes[10];
let pliusas = knopkes[11];
let pliusMinus = knopkes[12];
let zero = knopkes[13];
let dot = knopkes[14];
let equal = knopkes[15];
let result ;
knopkes.forEach(el =>{
    el.addEventListener(`click`,()=>{
        
        score.textContent = score.textContent +=el.textContent;
    })
})

equal.addEventListener(`click`,()=>{
     score.textContent = eval(score.textContent)

})


//Function("return " + userInput)();
button:hover{
    background-color:#8da725
}

#content{
    width:300px;
    display:grid;
    grid-template-columns:repeat(4,1fr) ;
}
button{
    background-color: #bad455;
    width:100px;
    height:100px;
}

#score {
    font-size:50px;
    text-align: end;
    width:400px;
    height: 100px;;
    background-color: aqua;
}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="pro4.css">
    </head>
    <body>

        <div id="score"></div>   
        <div id="content">
        
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>x</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>-</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>+</button>
        <button>-+  </button>
        <button>0</button>
        <button>.</button>
        <button>=   </button>
    </div>
        <script src="pro4.js"></script>
    </body>
    </html>
Hello , currently Im building a calculator and when I press the equal sign I get this error: Uncaught SyntaxError: Invalid left-hand side in assignment at HTMLButtonElement. (pro4.js:28) (anonymous) @ pro4.js:28

But the assignment symbol is correct isn't it? If the double or triple equality sign means comparing, the single one is for assignment right? So why do I get the error then? Any help is helpful.

Upvotes: 1

Views: 319

Answers (2)

Parking Master
Parking Master

Reputation: 626

Your adding up the textContent value like "84x7":

eval("84x7");

You need to replace the x (times) operator with javascript; example:

var val = "84x7";
val.replace(/\x/g, "*").replace(/\=/g, "");
// 84*7

Then calculate it:

eval((score.textContent).replace(/\*/g, "*"));

Here's a live example.

let knopkes = document.querySelectorAll(`button`);
let score = document.querySelector(`#score`)
let seven = knopkes[0];
let eight = knopkes[1];
let nine = knopkes[2]
let daugyba = knopkes[3]
let four = knopkes[4]
let five = knopkes[5]
let six = knopkes[6];
let minusas = knopkes[7];
let one = knopkes[8];
let two = knopkes[9];
let three = knopkes[10];
let pliusas = knopkes[11];
let pliusMinus = knopkes[12];
let zero = knopkes[13];
let dot = knopkes[14];
let equal = knopkes[15];
let result ;
knopkes.forEach(el =>{
    el.addEventListener(`click`,()=>{
        
        score.textContent = score.textContent +=el.textContent;
    })
})

equal.addEventListener(`click`,()=>{
     score.textContent = eval((score.textContent).replace(/\x/g, "*").replace(/\=/g, ""))

})


//Function("return " + userInput)();
button:hover{
    background-color:#8da725
}

#content{
    width:300px;
    display:grid;
    grid-template-columns:repeat(4,1fr) ;
}
button{
    background-color: #bad455;
    width:100px;
    height:100px;
}

#score {
    font-size:50px;
    text-align: end;
    width:400px;
    height: 100px;;
    background-color: aqua;
}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="pro4.css">
    </head>
    <body>

        <div id="score"></div>   
        <div id="content">
        
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>x</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>-</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>+</button>
        <button>-+  </button>
        <button>0</button>
        <button>.</button>
        <button>=   </button>
    </div>
        <script src="pro4.js"></script>
    </body>
    </html>

I also recommend parsing the math, so if the user types in x9 then it'll give you an error. The syntax will look like this: *9, You need to put "0" before it:

("*7").replace(/\*/g, " *").replace(/\+/g, " +").replace(/\-/g, " -").replace(/\//g, " /").replace(/ /g, "0");

// 0*7

Upvotes: 0

Jose Lora
Jose Lora

Reputation: 1390

The error is coming because the eval formula is wrong, when you create for example 3+2 and you press = is making the eval function with the value 3+2= and that is wrong, I recommend you separate in 2 values, one to display and other to calculate and use an if to don't include the = in the eval expression like this:

let knopkes = document.querySelectorAll(`button`);
let score = document.querySelector(`#score`)
let seven = knopkes[0];
let eight = knopkes[1];
let nine = knopkes[2]
let daugyba = knopkes[3]
let four = knopkes[4]
let five = knopkes[5]
let six = knopkes[6];
let minusas = knopkes[7];
let one = knopkes[8];
let two = knopkes[9];
let three = knopkes[10];
let pliusas = knopkes[11];
let pliusMinus = knopkes[12];
let zero = knopkes[13];
let dot = knopkes[14];
let equal = knopkes[15];
let result ;
knopkes.forEach(el =>{
    el.addEventListener(`click`,()=>{
        if (el.textContent != "="){
          score.textContent +=el.textContent;
        }
    })
})

equal.addEventListener(`click`,()=>{
     score.textContent = eval(score.textContent)
})


//Function("return " + userInput)();
button:hover{
    background-color:#8da725
}

#content{
    width:300px;
    display:grid;
    grid-template-columns:repeat(4,1fr) ;
}
button{
    background-color: #bad455;
    width:100px;
    height:100px;
}

#score {
    font-size:50px;
    text-align: end;
    width:400px;
    height: 100px;;
    background-color: aqua;
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="pro4.css">
    </head>
    <body>

        <div id="score"></div>   
        <div id="content">
        
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>x</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>-</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>+</button>
        <button>-+  </button>
        <button>0</button>
        <button>.</button>
        <button>=</button>
    </div>
        <script src="pro4.js"></script>
    </body>
    </html>

Upvotes: 1

Related Questions