我正试图使用JavaScript制作一个计算器，但无论我尝试什么，'operate'函数都会返回Undefined，我不知道为什么。我认为这可能与switch语句总是默认有关，不管怎样。
我曾尝试通过控制台手动调用"operate"函数，将"switch"语句改为"if"语句，将num1和num2改为整数，但都无济于事。
这是代码：
let textbar = document.getElementById('numberfield')
let numberContainer = document.getElementById('numberContainer').childNodes
let operationContainer = document.getElementById('operationContainer').childNodes
let operationContainerTwo = document.getElementById('operationContainerTwo').childNodes
let clear = document.getElementById('clear')
let equals = document.getElementById('equals')
let number1 = 0
let number2 = 0
let isSecondNumber = false
let operator = ''
window.onload = textbar.value = null
function add(numb1, numb2) {
return Number(numb1)+Number(numb2)
}
function subtract(numb1, numb2) {
return(parseFloat(numb1)-parseFloat(numb2))
}
function multiply(numb1, numb2) {
return(parseInt(numb1)*parseInt(numb2))
}
function divide(numb1, numb2) {
return(parseInt(numb1)/parseInt(numb2))
}
function exponent(numb1, numb2){
return(parseInt(numb1)**parseInt(numb2))
}
function operate(num1, num2, operation) {
switch(operation){
case '+':
textbar.setAttribute('value', add(num1, num2));
break
case '-':
textbar.setAttribute('value', subtract(num1, num2));
break
case 'x':
case '*':
textbar.setAttribute('value', multiply(num1, num2));
break
case '÷':
case '/':
textbar.setAttribute('value', divide(num1, num2));
break
case '^':
textbar.setAttribute('value', exponent(num1, num2));
break
default:
console.log("error");
console.log(operator);
}
}
function writeNumber(){
textbar.value += this.innerHTML
}
function operatorSelect(){
operator = this.innerHTML
number1 = Number(textbar.value)
textbar.value = null
}
function clearOperator(){
textbar.value = null
number1 = 0
number2 = 0
operator = ''
}
function equalsOperator(){
number2 = Number(textbar.value)
textbar.value = operate(number1, operator, number2)
}
numberContainer.forEach(element => element.addEventListener('click', writeNumber))
operationContainer.forEach(element => element.addEventListener('click', operatorSelect))
operationContainerTwo.forEach(element => element.addEventListener('click', operatorSelect))
clear.removeEventListener('click', operatorSelect)
clear.addEventListener('click', clearOperator)
equals.removeEventListener('click', operatorSelect)
equals.addEventListener('click', equalsOperator)*{
margin: 0px;
padding: 0px;
}
label{
grid-area: numberfield;
}
form{
grid-area: form;
}
input{
color: white;
}
button{
color: white;
background-color: black;
}
div#numberContainer{
grid-area: div;
display: grid;
grid-template-rows: 50px 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
}
div#operationContainer{
grid-area: oper;
display: grid;
grid-template-rows: 50px 50px 100px;
grid-template-columns: 50px;
}
div#operationContainerTwo{
grid-area: oper2;
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px;
}
div#calculatorContainer{
background-color: black;
color: white;
display: grid;
width: 260px;
grid-template-areas:
'numberfield numberfield numberfield numberfield numberfield'
'form form form form form'
'div div div oper oper2'
'div div div oper oper2'
'div div div oper oper2'
'div div div oper oper2'
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Calculator</title>
</head>
<body>
<div id="calculatorContainer">
<label for="numberfield">Calculator</label>
<form><input type="text" readonly disabled id="numberfield"></form>
<div id="numberContainer">
<button>7</button><button>8</button><button>9</button>
<button>4</button><button>5</button><button>6</button>
<button>1</button><button>2</button><button>3</button>
<button>0</button><button>00</button><button>.</button>
</div>
<div id="operationContainer">
<button>÷</button>
<button>x</button>
<button>+</button>
</div>
<div id="operationContainerTwo">
<button id="clear">ON/AC</button>
<button>-</button>
<button>^</button>
<button id="equals">=</button>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>operate不返回任何内容，但您尝试将结果分配给输出
论点的顺序也是错误的
let textbar = document.getElementById('numberfield')
let numberContainer = document.getElementById('numberContainer').childNodes
let operationContainer = document.getElementById('operationContainer').childNodes
let operationContainerTwo = document.getElementById('operationContainerTwo').childNodes
let clear = document.getElementById('clear')
let equals = document.getElementById('equals')
let number1 = 0
let number2 = 0
let isSecondNumber = false
let operator = ''
window.onload = textbar.value = null
function add(numb1, numb2) {
return Number(numb1)+Number(numb2)
}
function subtract(numb1, numb2) {
return(parseFloat(numb1)-parseFloat(numb2))
}
function multiply(numb1, numb2) {
return(parseInt(numb1)*parseInt(numb2))
}
function divide(numb1, numb2) {
return(parseInt(numb1)/parseInt(numb2))
}
function exponent(numb1, numb2){
return(parseInt(numb1)**parseInt(numb2))
}
function operate(num1, operation, num2) {
switch(operation){
case '+':
return add(num1, num2);
case '-':
return subtract(num1, num2);
case 'x':
case '*':
return multiply(num1, num2);
case '÷':
case '/':
return divide(num1, num2);
case '^':
return exponent(num1, num2);
default:
console.log("error");
console.log(operator);
}
}
function writeNumber(){
textbar.value += this.innerHTML
}
function operatorSelect(){
operator = this.innerHTML
number1 = Number(textbar.value)
textbar.value = null
}
function clearOperator(){
textbar.value = null
number1 = 0
number2 = 0
operator = ''
}
function equalsOperator(){
number2 = Number(textbar.value)
textbar.value = operate(number1, operator, number2)
}
numberContainer.forEach(element => element.addEventListener('click', writeNumber))
operationContainer.forEach(element => element.addEventListener('click', operatorSelect))
operationContainerTwo.forEach(element => element.addEventListener('click', operatorSelect))
clear.removeEventListener('click', operatorSelect)
clear.addEventListener('click', clearOperator)
equals.removeEventListener('click', operatorSelect)
equals.addEventListener('click', equalsOperator)*{
margin: 0px;
padding: 0px;
}
label{
grid-area: numberfield;
}
form{
grid-area: form;
}
input{
color: white;
}
button{
color: white;
background-color: black;
}
div#numberContainer{
grid-area: div;
display: grid;
grid-template-rows: 50px 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
}
div#operationContainer{
grid-area: oper;
display: grid;
grid-template-rows: 50px 50px 100px;
grid-template-columns: 50px;
}
div#operationContainerTwo{
grid-area: oper2;
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px;
}
div#calculatorContainer{
background-color: black;
color: white;
display: grid;
width: 260px;
grid-template-areas:
'numberfield numberfield numberfield numberfield numberfield'
'form form form form form'
'div div div oper oper2'
'div div div oper oper2'
'div div div oper oper2'
'div div div oper oper2'
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Calculator</title>
</head>
<body>
<div id="calculatorContainer">
<label for="numberfield">Calculator</label>
<form><input type="text" readonly disabled id="numberfield"></form>
<div id="numberContainer">
<button>7</button><button>8</button><button>9</button>
<button>4</button><button>5</button><button>6</button>
<button>1</button><button>2</button><button>3</button>
<button>0</button><button>00</button><button>.</button>
</div>
<div id="operationContainer">
<button>÷</button>
<button>x</button>
<button>+</button>
</div>
<div id="operationContainerTwo">
<button id="clear">ON/AC</button>
<button>-</button>
<button>^</button>
<button id="equals">=</button>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>