How to avoid that page click when I click Calculate in the form with Javascript

Asked

Viewed 112 times

1

I’m doing this program for a college job with HTML CSS and JS. But whenever I click to calculate the page reload and the result consequently we are. I’ve looked at other questions here and in other forums but found nothing that worked If you could help me, I’d be most 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>

javascript html css

  • Hello John! My answer did not help? I saw that you canceled it. There is no problem in unchecking it, but if you can say the reason so I can improve. Obg!

  • Sorry the intention was to mark kkkk I’m new on the platform, already scored again.

2 answers

4


Just remembering that your code has 3 problems:

1. You are adding up the values in the wrong way. You have to convert the values of the fields into numbers before adding up, otherwise they will only be concatenated.

2. The division to catch the average is wrong: add the numbers and divide by 4, and do not divide 4 by the sum of the numbers.

3. That one if will never be true: if (media < 5 && media < 7) {

See at the end of the response the code optimized and fixed.

Place at the end of the function:

event.preventDefault();

This will prevent the form from being submitted, preventing page reload.

As also said by Valdeir Psr, if you define the type of button as type="button", the event.preventDefault(); no longer necessary, but also the required will have no effect.

But I go a little further: if you just want to do calculations, you don’t even need to use <form> (see Edit at the end of the answer). Use the document.getElementById:

function calcular_media(){

    var sit="";
    var nota1;
    nota1 = document.getElementById("nota1").value;
    var nota2;
    nota2 = document.getElementById("nota2").value;
    var nota3;
    nota3 = document.getElementById("nota3").value;
    var nota4;
    nota4 = document.getElementById("nota4").value;

    ...

}

Optimized and corrected code:

function calcular_media(){

    var sit,
    nota1 = parseFloat(document.getElementById("nota1").value),
    nota2 = parseFloat(document.getElementById("nota2").value),
    nota3 = parseFloat(document.getElementById("nota3").value),
    nota4 = parseFloat(document.getElementById("nota4").value),
    media = (nota1+nota2+nota3+nota4)/4;

   if (media >= 5 && media < 7) {
      sit = "Você esta de recuperação"
   } else if(media >= 7) {
            sit = "Você esta aprovado"
    } else {
        sit = "Você foi reprovado";
    }
    document.getElementById("med").value=media;
    document.getElementById("sit").value=sit;
    
    if(media){
       event.preventDefault();
    }
}
<div id="pgmedia">
  <form class="media" tabindex="1">
     <input id="nota1" required type="text" placeholder="Sua Nota no 1° Bimestre" >
     <input id="nota2" required type="text" placeholder="Sua Nota no 2° Bimestre" >
     <input id="nota3" required type="text" placeholder="Sua Nota no 3° Bimestre" >
     <input id="nota4" required type="text" placeholder="Sua Nota no 4° Bimestre" >
     <button class="botaoCalcular"  onclick="calcular_media()">Calcular</button>
     <input id="med" type="text" name="media" placeholder="Sua média" readonly/>
     <label></label><textarea id="sit" name="situação" placeholder="Sua Situação" readonly></textarea>
  </form>
</div>

Edit

I noticed you want to use the required for a simple empty field control. In this case, you can use the <form>. The corrected code above has been changed to use with <form>.

1

This happens because you are not defining the attribute type on the button <button class="botaoCalcular" onclick="calcular_media()">Calcular</button>.

This causes the browser to automatically assign the value of this attribute to submit, which is the sending of a form.

To avoid this problem, simply add the attribute type="button". Ex:

<button type="button" class="botaoCalcular"  onclick="calcular_media()">Calcular</button>

Example: 

/* 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 type="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>

  • Thank you so much for the answer. It was a real class. Thank you really helped a lot.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.