-4

Estou tentando capturar o valor do input e mandar para o script do js, onde se a nota do aluno for >= 7 exibe na tag p "Aprovado" e caso contrario exibe "Reprovado", mas estou travado na lógica do js, não consigo exibir o resultado.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College FX</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    </style>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>COLLEGE FX</h1>
        </header>


        <div class="formcontainer">
            <p>Welcome student, this is your grading portal, together we will check if you pass or fail</p>

            <form class="form" action="">
                <input type="text" name="name" id="name" placeholder="enter you name">
                <input type="number" name="note1" id="note1" placeholder="enter test grade 1">
                <input type="number" name="note2" id="note2" placeholder="enter test grade 2">

                <select class="city" value="college">
                    <option value="sp">São paulo</option>
                    <option value="sp">Toronto</option>
                    <option value="sp">New york</option>
                    <option value="sp">Sydney</option>
                </select> <br>


                <input  onclick="" type="submit" value="Calcular" class="Calcular" id="btn">

                <p id="result" class="r"> </p>
            </form>
        </div>
</div>


<script src="./script.js"></script>
let btn = document.querySelector("#btn")

btn.addEventListener("click",function(e){

    e.preventDefault()

    const n1 = document.querySelector("#note1").value
    const value1 = n1.value
    const n2 = document.querySelector("#note2").value
    const value2 = n2.value
    
    const media = parseInt((value1)) + parseInt((value2)) /2 
            if (media >=7){
                    document.getElementById("#result").innerHTML = "Aprovado"
            } else{
                    document.getElementById("#result").innerHTML = "reprovado"
            }

})
</body>

</html>
0

1 Resposta 1

6

Isso está acontecendo porque você está tentando

document.getElementById("#result").innerHTML

Mas o id do seu elemento é id="result", portanto basta substituir por

document.getElementById("result").innerHTML

A # só é utilizada no querySelector para especificar que se trata de um id, assim como o . no querySelector indica se tratar de uma classe. Como você está fazendo o uso do getElementById para selecionar o elemento no qual deseja exibir o resultado, o uso da # torna-se errôneo, a menos que seu id seja id="#result".

Além disso, quando você escreve

const n1 = document.querySelector("#note1").value

você já está pegando o valor do input, assim quando você escreve novamente

const value1 = n1.value

sua variável value1 possuirá valor undefined, pois n1 já é o valor que estava armazenado no input, e esse valor não possui um atributo value.

Ainda, ao parsear os valores, não é necessário

parseInt((value1))

apenas

parseInt(value1)
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .