为什么我会收到 Uncaught SyntaxError: Invalid left-hand side in assignment at HTMLButtonElement.？

Question

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>

您好，目前我正在构建一个计算器，当我按等号时出现此错误： Uncaught SyntaxError: Invalid left-hand side in assignment 在 HTMLButtonElement。 (pro4.js:28) （匿名）@ pro4.js:28

但是赋值符号是正确的不是吗？如果双等号或三等号表示比较，那么单一个是用于赋值的，对吗？那么为什么我会得到错误呢？任何帮助都会有所帮助。

Answer 1

错误即将到来，因为eval 公式是错误的，当您创建例如3+2 并按下= 时，正在使用值eval 生成eval 函数@ 值3+2=，这是错误的，我建议您将两个值分开，一个用于显示，另一个用于计算并使用 if 在 eval 表达式中不包含 =，如下所示：

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>

Answer 2

您将 textContent 值加起来，例如“84x7”：

eval("84x7");

您需要将x（次）运算符替换为javascript；示例：

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

然后计算：

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

这是一个活生生的例子。

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>

我还建议解析数学，所以如果用户输入x9，那么它会给你一个错误。语法如下：*9，你需要在它前面加上“0”：

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

// 0*7