我正在制作一个简单的计算器(我是js的新手(，但在实现平方根的方法时遇到了困难。除了平方根函数外，我的整个计算器都在工作。正如你所能想象的，不同之处在于，只有当一个数字被压在平方根符号后面时，这个数字才应该是平方根的。
这是代码：
"use strict";
const buttons = document.querySelectorAll(".btn");
let equationValues = [];
let operator;
let stringNumber = "";
buttons.forEach(function (button) {
button.addEventListener("click", (event) => {
let num = event.target.textContent;
let answer = document.querySelector(".answer");
switch (num) {
case "+":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "X":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "-":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "÷":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "√":
equationValues.push(parseInt(stringNumber)); //PROBLEM IS HERE*****
operator = num;
answer.textContent += num;
stringNumber = "";
case "=":
equationValues.push(parseInt(stringNumber));
stringNumber = "";
if (operator == '+') {
let answerValue = equationValues.reduce((function(a, b) {return a + b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == '-') {
let answerValue = equationValues.reduce((function(a, b) {return a - b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == 'X') {
let answerValue = equationValues.reduce((function(a, b) {return a * b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == '÷') {
let answerValue = equationValues.reduce((function(a, b) {return a / b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == '√') {
let answerValue = equationValues.reduce((function(a) {return Math.sqrt(a);}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
}
equationValues.push(parseInt(num));
console.log(`${answer.value}, ${equationValues}, ${operator}`);
break;
case "0":
stringNumber += num;
answer.textContent += num;
break;
case "1":
answer.textContent += num;
stringNumber += num;
break;
case "2":
stringNumber += num;
answer.textContent += num;
break;
case "3":
stringNumber += num;
answer.textContent += num;
break;
case "4":
stringNumber += num;
answer.textContent += num;
break;
case "5":
stringNumber += num;
answer.textContent += num;
break;
case "6":
stringNumber += num;
answer.textContent += num;
break;
case "7":
stringNumber += num;
answer.textContent += num;
break;
case "8":
stringNumber += num;
answer.textContent += num;
break;
case "9":
stringNumber += num;
answer.textContent += num;
break;
}
});
});
document.querySelector(".clear").addEventListener('click', function() {
document.querySelector(".answer").textContent = "";
equationValues = [];
stringNumber = "";
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400&display=swap"
rel="stylesheet"
/>
<title>Calculator Expiriment V2</title>
</head>
<body>
<h1>Calculator</h1>
<section class="calc">
<p class = "instructions"><em>Please press what you want to calculate</em></p>
<p class="answer"></p>
<button class="btn" href="#"><strong>7</strong></button>
<button class="btn" href="#"><strong>8</strong></button>
<button class="btn" href="#"><strong>9</strong></button>
<button class="btn" href="#"><strong>÷</strong></button>
<button class="btn" href="#"><strong>4</strong></button>
<button class="btn" href="#"><strong>5</strong></button>
<button class="btn" href="#"><strong>6</strong></button>
<button class="btn" href="#"><strong>X</strong></button>
<button class="btn" href="#"><strong>1</strong></button>
<button class="btn" href="#"><strong>2</strong></button>
<button class="btn" href="#"><strong>3</strong></button>
<button class="btn" href="#"><strong>-</strong></button>
<button class="btn" href="#"><strong>0</strong></button>
<button class="btn" href="#"><strong>√</strong></button>
<button class="btn" href="#"><strong>=</strong></button>
<button class="btn" href="#"><strong>+</strong></button>
</section>
<div class = "left">
<button class="clear" href="#"><strong>C</strong></button>
</div>
</body>
<script src="script.js"></script>
</html>您的计算器只适用于相同的符号运算。例如：
2 + 4 x 5 = 22 // your calculator prints 40
如果您希望它以这种方式工作，并且希望它只适用于在√之后输入的一个数字，则可以执行if-else来检查equationValues中的最后一个元素是否是数字。如果不是，则可以打印类似于无效的内容，而如果是数字，则可以计算sqrt并打印值。
else if (operator == '√') {
let answerValue = "";
if(!isNaN(equationValues[equationValues.length - 1])) {
answerValue = Math.sqrt(equationValues[equationValues.length - 1]);
} else {
answerValue = "Invalid";
}
answer.textContent += ' ' + "=" + ' ' + answerValue;
}
在下面试试：
"use strict";
const buttons = document.querySelectorAll(".btn");
let equationValues = [];
let operator;
let stringNumber = "";
buttons.forEach(function (button) {
button.addEventListener("click", (event) => {
let num = event.target.textContent;
let answer = document.querySelector(".answer");
switch (num) {
case "+":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "X":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "-":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "÷":
equationValues.push(parseInt(stringNumber));
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "√":
equationValues.push(parseInt(stringNumber)); //PROBLEM IS HERE*****
operator = num;
answer.textContent += num;
stringNumber = "";
break;
case "=":
equationValues.push(parseInt(stringNumber));
stringNumber = "";
if (operator == '+') {
let answerValue = equationValues.reduce((function(a, b) {return a + b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == '-') {
let answerValue = equationValues.reduce((function(a, b) {return a - b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == 'X') {
let answerValue = equationValues.reduce((function(a, b) {return a * b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == '÷') {
let answerValue = equationValues.reduce((function(a, b) {return a / b;}))
answer.textContent += ' ' + "=" + ' ' + answerValue;
} else if (operator == '√') {
let answerValue = "";
if(!isNaN(equationValues[equationValues.length - 1])) {
answerValue = Math.sqrt(equationValues[equationValues.length - 1]);
} else {
answerValue = "Invalid";
}
answer.textContent += ' ' + "=" + ' ' + answerValue;
}
equationValues.push(parseInt(num));
console.log(`${answer.value}, ${equationValues}, ${operator}`);
break;
case "0":
stringNumber += num;
answer.textContent += num;
break;
case "1":
answer.textContent += num;
stringNumber += num;
break;
case "2":
stringNumber += num;
answer.textContent += num;
break;
case "3":
stringNumber += num;
answer.textContent += num;
break;
case "4":
stringNumber += num;
answer.textContent += num;
break;
case "5":
stringNumber += num;
answer.textContent += num;
break;
case "6":
stringNumber += num;
answer.textContent += num;
break;
case "7":
stringNumber += num;
answer.textContent += num;
break;
case "8":
stringNumber += num;
answer.textContent += num;
break;
case "9":
stringNumber += num;
answer.textContent += num;
break;
}
});
});
document.querySelector(".clear").addEventListener('click', function() {
document.querySelector(".answer").textContent = "";
equationValues = [];
stringNumber = "";
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400&display=swap"
rel="stylesheet"
/>
<title>Calculator Expiriment V2</title>
</head>
<body>
<h1>Calculator</h1>
<section class="calc">
<p class = "instructions"><em>Please press what you want to calculate</em></p>
<p class="answer"></p>
<button class="btn" href="#"><strong>7</strong></button>
<button class="btn" href="#"><strong>8</strong></button>
<button class="btn" href="#"><strong>9</strong></button>
<button class="btn" href="#"><strong>÷</strong></button>
<button class="btn" href="#"><strong>4</strong></button>
<button class="btn" href="#"><strong>5</strong></button>
<button class="btn" href="#"><strong>6</strong></button>
<button class="btn" href="#"><strong>X</strong></button>
<button class="btn" href="#"><strong>1</strong></button>
<button class="btn" href="#"><strong>2</strong></button>
<button class="btn" href="#"><strong>3</strong></button>
<button class="btn" href="#"><strong>-</strong></button>
<button class="btn" href="#"><strong>0</strong></button>
<button class="btn" href="#"><strong>√</strong></button>
<button class="btn" href="#"><strong>=</strong></button>
<button class="btn" href="#"><strong>+</strong></button>
</section>
<div class = "left">
<button class="clear" href="#"><strong>C</strong></button>
</div>
</body>
<script src="script.js"></script>
</html>