个人中心
gpt4 book ai didi

javascript - 为什么我的按钮在我点击时不隐藏文本区域

转载 作者：太空宇宙 更新时间：2023-11-03 22:18:17 25 4
gpt4 key购买 nike

这是一个简单的计算器。当我点击按钮时，他无法隐藏文本区域我试图找到问题。当我点击时，他显示和隐藏的速度太快了，我不知道为什么……我真的希望有人能发现我的错误。下面是我用 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/

25 4 0
文章推荐： Python OpenCV solvePnP 转换为欧拉角
文章推荐： c# - 如果来自代码隐藏的 Treeview 控件中的相应节点，如何检查复选框？
文章推荐： macos - 启动服务器后退出node.js的正确方法是什么？
文章推荐： c# DAL类和业务层类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com