Javascript Javascript não funciona ao tentar criar uma calculadora

Ryan Luca · 2 de abril de 2020

estou tentando fazer um simples calculadora de notas em html e javascript

só que por algum motivo não que lincar o javascript com o html

HTML:

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <head>
        <title>Notas Bimestrais</title>
        <link rel="stylesheet" type="text/css" href="bi.css">
        
<body class="corpo_tri">
    <br><br><br><br><br>
    <center><div class="oclock">
        <script src="script.js"></script> 
        <font size=7 color="white"><b>Cálculo Bimestral</b></font>
        <br><br><br><br>
        <input type="text" name="aluno" id="nome" style="background-color:rgb(16, 2, 80);color:white;">
        <font color="white" size=5><b>Nome do Aluno</b></font>
        <br><br>
        <input type="value" name="nota1" id="input-1" style="background-color:rgb(16, 2, 80);color:white;">
        <font color="white" size=5><b>Nota do 1° bimestre</b></font>
        <br><br>
        <input type="value" name="nota2" id="input-2" style="background-color:rgb(16, 2, 80);color:white;">
        <font color="white" size=5><b>Nota do 2° bimestre</b></font>
        <br><br>
        <input type="value" name="nota3" id="input-3" style="background-color:rgb(16, 2, 80);color:white;">
        <font color="white" size=5><b>Nota do 3° bimestre</b></font>
        <br><br>
        <input type="value" name="nota4" id="input-4" style="background-color:rgb(16, 2, 80);color:white;">
        <font color="white" size=5><b>Nota do 4° bimestre</b></font>
        <br><br><br><br><br>
        <button id="salvar"><b><font size=6 face="Impact" color="#8B0000">Salvar</font></b></button>
        <button id="registro"><b><font size=6 face="Impact" color="#8B0000">Registro</font></b></button>
        
    </div></center>
      
</body>
</html>

Javascript :

const a = function notas_bi(aluno,n1,n2,n3,n4,media){
    aluno = document.getElementById("nome");

    n1 = document.getElementById("input-1");
    n2 = document.getElementById("input-2");
    n3 = document.getElementById("input-3");
    n4 = document.getElementById("input-4"); 
     
     media = (n1+n2+n3+n4)/4;
    
    document.write("Média: "+value.media);

if(value.media < 6){
  var recu = (6 - media);
  alert("Aluno em recuperação, precisando de "+recu);
}
else{
  alert("Parabens!!! Aluno aprovado, boas férias ^-^");
}
}

var botao2 = document.getElementsById("salvar").onclick = a;

var regis = document.getElementsById("registro").onclick = prox;

const prox = function proxima_pagina(){
   //aqui é pra ser registro de proxima página
}

GabrielSennaMs · 3 de abril de 2020

@Ryan Luca

21 horas atrás, Ryan Luca disse:

so que por algum motivo não que lincar o javascript com o html

Bom amigo, nesse seu código tem um monte de problema, mas vamos tentar te ajudar!

Primeiro e o mais importante!

21 horas atrás, Ryan Luca disse:

estou tentando fazer um simples calculadora de notas em html e javascript

so que por algum motivo não que lincar o javascript com o html

Você executando, roda, programando ou linca Javascript com html e não Java, nunca confunda isso, você até pode usar java pra gerar html como reposta de uma request, mas manupular o html no navegador só o javascript faz.

Bom o primeiro erro encontrado quando eu tentei executar seu código Javascript, foi quando você tenta apontar para um evendo de click.

21 horas atrás, Ryan Luca disse:

var botao2 = document.getElementsById("salvar").onclick = a; var regis = document.getElementsById("registro").onclick = prox;

Tudo parece certo, mas você adicionou um "s" no final de "getElement s ById", e por esse motivo o DOM não encontra o elemento com a id passada.

Atual:

var botao2 = document.getElementsById("salvar").onclick = a;
var regis = document.getElementsById("registro").onclick = prox;

O correto:

var botao2 = document.getElementById("salvar").onclick = a;
var regis = document.getElementById("registro").onclick = prox;

O segundo erro depois que eu corrigi o problema de cima foi um erro de variável não encontrada, a variavel "value.media", não existe. Quando você vai fazer o calculo da media das notas, você salva o resultado na variável "media", e não na variável value, e pra acessar o valor basta apontar para a variável media.

Atual:

document.write("Média: "+value.media);

O correto:

document.write("Média: "+media);

O terceiro erro que eu encontrei está quando você tenta pegar o valor dos inputs para fazer os calculos.

Você usa o métdo getElementById para pegar o valor do elemento para fazer o calculo, porém você pega o objeto do elemento e salva na variável, e não o valor dentro dele. Você também não converte o valor para um tipo Inteiro ou Floate.

No estado atual, ele tenta fazer a soma de 4 objetos e depois tenta dividir eles em 4.

Atual:

n1 = document.getElementById("input-1");
n2 = document.getElementById("input-2");
n3 = document.getElementById("input-3");
n4 = document.getElementById("input-4");

O correto poderia ser:

n1 = parseInt(document.getElementById("input-1").value);
n2 = parseInt(document.getElementById("input-2").value);
n3 = parseInt(document.getElementById("input-3").value);
n4 = parseInt(document.getElementById("input-4").value);

Bom, feito isso o seu código deve funciona, eu acho.

Ele ainda tem um erro na logica, mas isso é algo que você tem que encontra.

Tem alguns erros no html, mas ele não vai impedir que sua página funcione, um deles está no tipos("type") dos inputs, o tipo "value" não existe.

Seu código Javascript deve ficar como esse aqui:

        const a = function notas_bi()
        {
            aluno = document.getElementById("nome");

            n1 = parseInt(document.getElementById("input-1").value);
            n2 = parseInt(document.getElementById("input-2").value);
            n3 = parseInt(document.getElementById("input-3").value);
            n4 = parseInt(document.getElementById("input-4").value);

            media = (n1 + n2 + n3 + n4) / 4;

            document.write("Média: "+media);

            if(media < 6)
            {
                var recu = (6 - media);
                alert("Aluno em recuperação, precisando de "+recu);
            }
            else{
                alert("Parabens!!! Aluno aprovado, boas férias ^-^");
            }

        }

        const prox = function proxima_pagina()
        {
            //aqui é pra ser registro de proxima página
        }

        var botao2 = document.getElementById("salvar").onclick = a;

        var regis = document.getElementById("registro").onclick = prox;

Ryan Luca · 3 de abril de 2020

@GabrielSennaMs obrigado man, ja tave desistindo aqui, sei que teve verios erro to começando aprender agora vou tentar aplica tudo que você me ensinou valeu man