我正在尝试使用HTML、CSS和JavaScript构建一个简单的计算器。我为计算器增加了电源开关机的功能。我想要的是，如果电源关闭按钮被点击，那么计算器屏幕不接受任何输入，直到电源打开按钮被点击。（我得到了正确的功能）。我面临的问题是，
我试了一下，但还是找不出是什么错误。我是JavaScript新手。好心帮帮我。多谢了。代码如下：
null
let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
var screenvalue;
let string;
var buttonText = "";
let status = false;
document.getElementById("onbtn").addEventListener('click',(f) => {
buttonText = f.target.innerText;
if(buttonText == 'ON'){
status = true;
screen.value = "Power On";
screenvalue = ' ';
string=" ";
}
for(item of buttons){
if(status==false){
console.log("after power off" +string);
console.log("after power is off" +screenvalue);
screen.value = "Turn on power";
}
else{
item.addEventListener('click', (e) => {
buttonText = e.target.innerText;
if(status==true && buttonText == 'X'){
buttonText = '*';
string = string + buttonText;
screenvalue = screenvalue + buttonText;
screen.value = screenvalue;
}
else if(status==true && buttonText =='AC'){
string=" ";
screenvalue = "";
screen.value = "";
}
else if(status==true && buttonText == '='){
screenvalue = eval(screenvalue);
string = screenvalue.toString();
screen.value = screenvalue;
}
else if(status==true && buttonText == 'C'){
string = string.slice(0,-1);
screenvalue = string;
screen.value = screenvalue;
}
else if(status==true && buttonText == 'OFF'){
status = false;
screen.value = "Power Off";
string = " ";
screenvalue = "";
console.log("value of string in off "+string);
console.log("value of screenvalue in off "+screenvalue);
return;}
else{
if(status == true){
screenvalue = screenvalue + buttonText;
screen.value = screenvalue;
string = screenvalue.toString();}
}
})
}
}
}).container{
text-align: center;
margin-top: 25px;
}
.calculator{
display: inline-block;
border: 2px black;
background-color: firebrick;
height: 480px;
border-radius: 15px;
padding: 8.5px;
}
table{
margin: auto;
margin-top: 20px;
}
input{
font-size: 30px;
height: 70px;
border: solid;
border-color: black;
border-width: 2.5px;
border-radius: 24px;
margin-top:23px;
width: 368px
}
button{
margin-top: 2px;
font-size: 20px;
background: lemonchiffon;
width: 92px;
height: 50px;
border-radius: 24px;
padding: 5px;
}
button:hover{
background-color: plum;
}
button:active{
background-color: palevioletred;
}<body>
<div class="container">
<h1>Calculator</h1>
<div class="calculator">
<input type="text" name="screen" id="screen">
<table>
<tr>
<td><button>(</button></td>
<td><button>)</button></td>
<td><button>C</button></td>
<td><button>/</button></td>
</tr>
<tr>
<td><button>9</button></td>
<td><button>8</button></td>
<td><button>7</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button>6</button></td>
<td><button>5</button></td>
<td><button>4</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button>3</button></td>
<td><button>2</button></td>
<td><button>1</button></td>
<td><button>X</button></td>
</tr>
<tr>
<td><button>0</button></td>
<td><button>.</button></td>
<td><button>=</button></td>
<td><button>%</button></td>
</tr>
<tr>
<td><button>AC</button></td>
<td><button id="onbtn">ON</button></td>
<td><button>OFF</button></td>
<td><button></button></td>
</tr>
</table>
</div>
</div>
</body>null
您的OnItem事件侦听器中缺少一些代码
document.getElementById("onbtn").addEventListener('click',(f) => {
buttonText = f.target.innerText;
if(buttonText == 'ON') {
status = true;
screen.value = "Power On";
screenvalue = ' ';
string=" ";
} else {
status = false;
// Other code
}
// render your items
}
