为什么我的点击按钮不隐藏文本区域答案

【问题标题】：Why my Button on my click dont hide textarea为什么我的点击按钮不隐藏文本区域
【发布时间】：2019-08-12 19:36:33
【问题描述】：

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

【问题讨论】：

标签： javascript html css button calculator

【解决方案1】：

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

您应该将按钮更改为：

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

【讨论】：

【解决方案2】：

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

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

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

接下来，你有一大堆不必要的重复代码。按钮点击的所有功能本质上都是做同样的事情，它们只是用被点击的按钮的值更新显示。所有这些都可以通过一个简单的函数来完成，您只需将一个值（被点击的按钮的值）传递给它。

然后，去掉所有内联事件属性 (onclick)。这就是 25 多年前事件的配置方式，这种做法不会死去，因为人们只是从其他地方复制/粘贴该技术。 There are a bunch of reasons not to do this. 现代的、基于标准的方法是将您的 JavaScript 与您的 HTML 完全分开（请注意下面我的回答中的 HTML 有多干净）。

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

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

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

我还更改了“注释”按钮的位置，因为它会遮挡计算器，将其放在底部。

看看这个解决方案和内联 cmets：

// 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>

【讨论】：

@TheLexa 不客气，但你还有工作要做。 eval() 函数并不总是像您期望的那样处理 ( 和 ) 符号，因此您必须检查它们并在找到它们时将等式分开。
抱歉我找不到 dm 我学过 html、css、JavaScript 和 worldpress。在那之后 jQuery 可能已经死了，也许我可以学习 ajax 或 node.js ？什么是最好的学习网站？以及如何获得我的第一个 jov 以及何时？抱歉重播这个问题，但我需要最新信息所有信息都会帮助我
@TheLexa 这些问题确实没有确切的答案。我想说学习 Web 开发的一个很好的资源是 The Mozilla Developer Network。