这是一个简单的计算器。当我点击按钮时，他无法隐藏文本区域 我试图找到问题。当我点击时，他显示和隐藏的速度太快了，我不知道为什么…… 我真的希望有人能发现我的错误。下面是我用 html、css、javascript 编写的代码。
function myFunction() {
var x = document.getElementById("myDiv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function runLB(){
document.case.display.value += "("
}
function runRB(){
document.case.display.value += ")"
}
function run1(){
document.case.display.value += "1"
};
function run2(){
document.case.display.value += "2"
};
function run3(){
document.case.display.value += "3"
};
function run4(){
document.case.display.value += "4"
};
function run5(){
document.case.display.value += "5"
};
function run6(){
document.case.display.value += "6"
};
function run7(){
document.case.display.value += "7"
};
function run8(){
document.case.display.value += "8"
};
function run9(){
document.case.display.value += "9"
};
function run0(){
document.case.display.value += "0"
};
function runPlus(){
document.case.display.value += "+"
};
function runMinus(){
document.case.display.value += "-"
};
function runDivide(){
document.case.display.value += "/"
};
function runMultiply(){
document.case.display.value += "*"
};
function runComma(){
document.case.display.value += "."
};
function runBack(){
var val = document.case.display.value.slice(0, -1);
document.case.display.value = val;
};
function runC(){
document.case.display.value = ""
};
function runEquals() {
if (document.case.display.value == "") {
document.case.display.value = ""
} else {
var equals = eval(document.case.display.value)
document.case.display.value = equals;
}
}html {
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
not (display) {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 16px;
vertical-align: baseline;
background: transparent;
}
ul {
list-style: none;
}
body {
width: 500px;
}
#a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
#a:hover
{
animation: animate 5s linear infinite;
}
@keyframes animate
{
0%
{
background-position: 0%;
}
100%
{
background-position: 400%;
}
}
#a:before
{
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
#a:hover:before
{
filter: blur(20px);
opacity:1;
animation: animate 5s linear infinite;
}
{}
form {
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
text-align: center;
padding: 7px;
align-content: center;
border-radius: 10px;
border: 5px solid #006699;
}
#display {
width: 98%;
height: 50px;
text-align: right;
font-size: 3rem;
margin: 7px;
border: 5px solid #006699;
}
.digit {
font-size: 2rem;
background-color: #f8f8f8;
height: 55px;
width: 20%;
border: 3px solid #c6c6c6;
display: inline-block;
box-shadow: 0 1px 1px;
color:#444;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
margin: 2px;
opacity: 0.9;
}
.oper {
font-size: 2rem;
background-color: #d6d6d6;
height: 55px;
width: 20%;
color: #444;
display: inline-block;
margin: 2px;
box-shadow: 0 1px 1px;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
opacity: 0.9;
}
#equal {
background-color:#006699 ;
color: white;
width: 41.5%;
}
textarea {
display: block;
margin-bottom: 20px;
resize: none;
width: 520px;
height: 400px;
max-width: 405px;
max-height: 400px;
margin-left: 36px;
margin-top: 20px;
font-size: 25px;
}<html>
<head>
<title>Calculator Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<form name="case" >
<input name="display" id="display" value="">
<input type="button" class="oper" value="(" onclick="runLB()">
<input type="button" class="oper" value=")" onclick="runRB()">
<input type="button" id="back" class="oper" value="CE" onclick="runBack()">
<input type="button" id="divide" class="oper" value="÷" onclick="runDivide()" >
<input type="button" class="digit" value="1" onclick="run1()">
<input type="button" class="digit" value="2" onclick="run2()">
<input type="button" class="digit" value="3" onclick="run3()">
<input type="button" id="multiply" class="oper" value="×" onclick="runMultiply()">
<input type="button" class="digit" value="4" onclick="run4()">
<input type="button" class="digit" value="5" onclick="run5()">
<input type="button" class="digit" value="6" onclick="run6()">
<input type="button" id="minus" class="oper" value="-" onclick="runMinus()" >
<input type="button" class="digit" value="7" onclick="run7()">
<input type="button" class="digit" value="8" onclick="run8()">
<input type="button" class="digit" value="9" onclick="run9()">
<input type="button" id="plus" class="oper" value="+" onclick="runPlus()">
<input type="button" class="digit" value="0" onclick="run0()">
<input type="button" id="comma" class="digit" value="." onclick="runComma()">
<input type="button" id="equal" class="oper" value="=" onclick="runEquals()">
<button id="a" onclick="myFunction()"> Note </button>
<div id="myDiv">
<textarea placeholder="Note"></textarea>
</div>
</body>最佳答案
默认情况下，HTML 按钮是“提交”类型(尝试提交表单)。
您应该将按钮更改为:
<button type="button" id="a" onclick="myFunction()"> Note </button>
关于javascript - 为什么我的按钮在我点击时不隐藏文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55289056/