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

Question

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

Answer 1

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

您应该将按钮更改为：

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

Answer 2

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

但是，让我们退后一步，因为这里还有一大堆其他问题。

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

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

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

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

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

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

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

看看这个解决方案和内联评论：

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

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

Why my Button on my click dont hide textarea

html

javascript

css

calculator

button