为什么单击我的按钮不会隐藏文本区域

时间：2019-03-21 20:52:31

标签： javascript html css button calculator

这是简单的计算器。当我单击按钮时，他无法隐藏文本区域 我试图找到问题。当我单击他时，他会显示并隐藏IDK。 我真的希望有人能找到我的错误。这是我用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>

2 个答案:

答案 0 :(得分：3)

默认情况下，HTML按钮是“提交”类型（尝试提交表单）。

您应该将按钮更改为：

<button type="button" id="a" onclick="myFunction()"> Note </button>

答案 1 :(得分：0)

您按钮的类型默认为“提交”按钮，因此它正在尝试提交表单，因此整个页面内容都消失了。将按钮更改为type=button即可解决。

但是，让我们备份一下，因为这里还有很多其他问题。

由于实际上没有提交任何表单数据，因此甚至不需要<form>元素。删除<form>和</form>也解决了按钮问题，因为现在将没有表单数据可以提交。

接下来，您将获得大量不必要的重复代码。按钮单击所具有的所有功能本质上都是相同的，它们只是使用被单击按钮的值更新显示。所有这些都可以通过一个简单的函数来完成，您只需将一个值（被单击的按钮的值）传递到其中即可。

然后，除去所有内联事件属性（onclick）。这是25年前配置事件的方式，并且该实践不会导致应有的死亡，因为人们只是从其他地方复制/粘贴该技术。 There are a bunch of reasons not to do this.基于标准的现代方法是将JavaScript与HTML完全分离（请注意，下面的答案中HTML的清洁程度更高）。

接下来，您一遍又一遍地使用document.case，说实话，我不知道那是什么，实际上我对为什么它不会引发错误感到困惑。相反，请获取要使用的元素的引用并直接与它们进行交互。

另外，最好使用<button>元素来编写按钮的某些HTML。这样一来，您可以显示一个字符，但可以存储另一个字符并将其传递给回调函数。

您还有一些无效的CSS（not规则和{}）。

我还通过将“便笺”按钮的位置置于底部来更改了“便笺”按钮的位置，从而使计算器变得模糊。

看看这个解决方案和内联注释：

// Get references to special buttons
let display = document.getElementById("display");
let ce = document.getElementById("back");
let note = document.getElementById("note");
let equals = document.getElementById("equal");

// And the textarea
let area = document.querySelector("textarea");

// Get all the operation and numbers buttons into an array
let buttons = Array.prototype.slice.call(document.querySelectorAll(".oper, .digit"));

// Loop over the buttons
buttons.forEach(function(btn){
  // Assign a click callback handler
  btn.addEventListener("click", function(){ 
    updateDisplay(this.value); // Call the function with the buttons value
  });
});

// This function will have the value of whatever button that got
// clicked passed into it and so one function handles all the buttons
function updateDisplay(val){
  display.value += val;
}

// Set up the CE button handler
ce.addEventListener("click", function(){
  display.value = "";
});

// Set up the note button's event handler
note.addEventListener("click", myFunction);

function myFunction() {
  // Just toggle the use of the hidden class instead of
  // manually testing for the display state of the element
  // and then modifying the inline style as a result
  area.classList.toggle("hidden");
}

function runBack(){
	var val = display.value.slice(0, -1);
  display.value = val;
};

equals.addEventListener("click", function() {
  if (display.value !== "") {
	  display.value = eval(display.value);
  }
});
html {
background:
	linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

ul { list-style: none; }

.hidden { display:none; } /* Just toggle the use of this for hidden/shown */

#note{
 position: absolute;
 bottom: 0
 right: 0;
 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;
}
#note:hover { animation: animate 5s linear infinite; }
@keyframes animate {
 0% { background-position: 0%; }
 100% { background-position: 400%; }
}
#note: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;
}
#note:hover:before
{
 filter: blur(20px);
 opacity:1;
 animation: animate 5s linear infinite;
}

.wrapper {

	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">
</head>
<body>
 <div class="wrapper">
  <input name="display" id="display">
  <input type="button" class="oper" value="(">
  <input type="button" class="oper" value=")">
  <button id="back" class="oper" value="">CE</button>
  <input type="button" id="divide" class="oper" value="÷">
  <input type="button" class="digit" value="1">
  <input type="button" class="digit" value="2">
  <input type="button" class="digit" value="3">
  <button id="multiply" class="oper" value="*">x</button>
  <input type="button" class="digit" value="4">
  <input type="button" class="digit" value="5">
  <input type="button" class="digit" value="6">
  <input type="button" id="minus" class="oper" value="-">
  <input type="button" class="digit" value="7">
  <input type="button" class="digit" value="8">
  <input type="button" class="digit" value="9">
  <input type="button" id="plus" class="oper" value="+">
  <input type="button" class="digit" value="0">
  <input type="button" id="comma" class="digit" value=".">
  <button id="equal" class="oper" value="">=</button>
  <div id="myDiv">
    <textarea placeholder="Note"></textarea>
  </div>
 </div>
 <button id="note"> Note </button>
</body>

相关问题
最新问题