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;
}



    Calculator Project

Scott Marcus · Accepted Answer

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

element. Removing the and

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

Why my Button on my click dont hide textarea

Answers (2)

Related Questions