Why my Button on my click dont hide textarea

Question

This is simple calculator .When i click on button he cant hide textarea I trying to find problem. When i click he show and hide soo fast idk why.. I really hope someone will find my mistake.Down this is my code i write in 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>

score 3 · Answer 1 · answered Mar 21 '19 at 20:57

3

By default, a HTML button is a 'submit' type (which tries to submit a form).

You should change your button to:

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

answered Mar 21 '19 at 20:57

Adam Jones

91
5

Scott Marcus · Accepted Answer · 2019-03-21T21:45:29.083

Your button's type is defaulting to a submit button and so it's trying to submit your form and so the entire page contents disappear. Changing the button to type=button solves that.

But, let's back up a bit because you have a whole bunch of other issues here.

Since you're not actually submitting any form data, you don't even need a <form> element. Removing the <form> and </form> also solves the button problem because now there will be no form data to submit.

Next, you've got a whole ton of unnecessary duplicated code. All the functions you have for the button clicks essentially do the same thing, they simply update the display with the value of the button that got clicked. All of that can be done with one simple function that you simply pass a value (the value of the button that got clicked) into.

Then, get rid of all the inline event atributes (onclick). This is how events were configured 25+ years ago and the practice will not die the death it deserves because people just copy/paste that technique from other places. There are a bunch of reasons not to do this. The modern, standards-based way is to separate your JavaScript completely from your HTML (note how much cleaner the HTML is in my answer below).

Next, you are using document.case over and over and, honestly, I have no idea what that is and I'm actually kind of stumped as to why it doesn't throw an error. Instead, get references to the elements that you'll want to work with and interact with them directly.

Also, some of the HTML for the buttons is better written with the <button> element. This will allow you to show one character, but store and pass a different one to the callback functions.

You also have some invalid CSS (the not rule and {}).

I've also change the positioning of the "Note" button as it obscures the calculator, by putting it at the bottom.

Take a look at this solution and the inline comments:

// 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 You're welcome, but you still have work to do. The `eval()` function isn't always going to handle `(` and `)` symbols as you would expect, so you'll have to check for them and break the equation apart if you find them. — Scott Marcus, Mar 21 '19 at 21:47
Sorry i cant find dm I leared html,css,JavaScript and worldpress. What after that jQuery is maybe dead,maybe i can learn ajax or node.js ? What is the best site for learning ? And how to get my first jov and when ? Sorry for replay this questions but i need fresh information All information will help me — Aleksa Kovacevic, Mar 22 '19 at 09:23
@TheLexa There really aren't exact answers to these questions. I would say that a great resource to learn web development is [The Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn). — Scott Marcus, Mar 22 '19 at 13:45

Why my Button on my click dont hide textarea

2 Answers2