I'm doing this program for a college job with HTML CSS and JS. But whenever I click on calculate the page reloads and the result consequently somo. I've already tried other questions here and in other forums but I did not find anything that worked if you can help me, I'll be very grateful.
/* Criado por João Divino em 20 de fevereiro de 2018 */
function calcular_media(){
var sit="";
var nota1;
nota1 = document.media.nota1.value;
var nota2;
nota2 = document.media.nota1.value;
var nota3;
nota3 = document.media.nota1.value;
var nota4;
nota4 = document.media.nota1.value;
var media = (4/(nota1+nota2+nota3+nota4));
if (media >= 5) {
if (media < 5 && media < 7) {
sit = "Você esta de recuperação"
} else {
sit = "Você esta aprovado"
}
} else {
sit = "Você foi reprovado";
}
document.getElementById("med").value=media;
document.getElementById("sit").value=sit;
}
.pgmedia {
width: 100%;
}
.media input {
width: 90%;
margin-left: 10px;
margin-right: 10px;
}
.media textarea {
width: 90%;
margin-left: 10px;
margin-right: 10px;
}
.botaoCalcular {
margin-left: 10px;
margin-right: 10px;
margin-top: 1px;
}
.media input {
padding-left: 20px;
color: #292929;
font-size: 18px;
background-color: #E9E9E9;
border: 1px solid #E9E9E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 40px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.media textarea {
padding-left: 20px;
color: #292929;
font-size: 18px;
background-color: #E9E9E9;
border: 1px solid #E9E9E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 200px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.botaoCalcular {
border-radius: 4px;
color: #fff;
padding: 2px 40px;
height: 40px;
margin-top: 18px;
opacity: 0.9;
margin-bottom: 20px;
cursor: pointer;
background: #B22222;
display: inline-block;
border: none;
border-bottom: 1px solid #500707;
border-right: 1px solid #500707;
position: center;
}
.botaoCalcular:hover {
opacity: 1.0;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Media Escolar</title>
<meta charset="UTF-8">
<meta name="description" content="Site para calcular média escolar">
<meta name="Keywords" content="javascript, HTML, CSS, Ecma script, aprendizado, exercicios, Ti, desenvolvimento web,atividades, IMC, Calculdor, Calculador de Média escolaar">
<meta name="robots" content="index, fallow">
<meta name="author" content="João Divino da Silva">
<link rel="stylesheet" href="css/media_escolar.css">
<script rel="scriptv" src="js/media_escolar.js" ></script>
</head>
<body>
<div id="pgmedia">
<form name ="media" class="media" tabindex="1" action="#" method="post">
<input id="nota1" name="nota1" required="" type="text" placeholder="Sua Nota no 1° Bimestre" >
<input id="nota2" name="nota2" required="" type="text" placeholder="Sua Nota no 2° Bimestre" >
<input id="nota3" name="nota3" required="" type="text" placeholder="Sua Nota no 3° Bimestre" >
<input id="nota4" name="nota4" required="" type="text" placeholder="Sua Nota no 4° Bimestre" >
<button class="botaoCalcular" onclick="calcular_media()">Calcular</button>
<input id="med" name="media" type="text" placeholder="Sua média" readonly/>
<label></label><textarea id="sit" name="situação" placeholder="Sua Situação" readonly></textarea>
</form>
</div>
</body>
</html>