Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Alguém pode me ajudar com o erro no 'addEventListener' ?

por LEVY GIMENES DA SILVA
| 52.2k xp | 9 posts
Assistente administrativo 
function calculateTip(event) {
    event.preventDefault();
    let bill = document.getElementById('bill').value;
    let serviceQual = document.getElementById('serviceQual').value;
    let numOfPeolpe = document.getElementById('people').value;

    if(bill == ' ' | serviceQual == 0){
        alert("Por favor, preencha corretamente os campos!")
        return;
    }

    if(numOfPeolpe == ' ' | numOfPeolpe <= 1){
        numOfPeolpe = 1;
        document.getElementById('each').style.display = "none";
    } else {
        document.getElementById('each').style.display = "block";
    }

    let total = (bill * serviceQual) / numOfPeolpe;
    total.toFixed(2);
    document.getElementById('tip').innerHTML = total;
    document.getElementById('totalTip').style.display = "block"
}

document.getElementById('totalTip').style.display = "none";
document.getElementById('each').style.display = "none";

document.getElementById('tipsForm').addEventListener('submit', calculateTip);

Consta o seguinte erro no console do navegador na linha 28: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener').

4 respostas
por Lorena Garcia
| 8213.4k xp | 12017 posts
Alura Scuba Team Suporte Educacional

Oi Levy, tudo bem?

O erro "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" indica que o elemento que você está tentando adicionar um ouvinte de eventos não foi encontrado na página.

Na linha 28, o código está tentando adicionar um ouvinte de eventos ao elemento com o id tipsForm. Isso significa que esse elemento não foi encontrado na página HTML.

Verifique se o id tipsForm está presente no elemento form do seu HTML e se não há nenhum erro de digitação no código JavaScript. Certifique-se também de que o seu código JavaScriptestá sendo carregado após o carregamento do HTML, para garantir que os elementos já estejam presentes na página quando o código é executado.

São as dicas que posso dar com o código que você mandou.

Um abraço e bons estudos.

por LEVY GIMENES DA SILVA
| 52.2k xp | 9 posts
Assistente administrativo

Segue meu código fo HTML...

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

    <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>Calculadora de Gorjetas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
    <div>
        <h1 class="title">Calculadora de Gorjetas!</h1>
    </div>
    <div>
        <form class="tipsForm">
            <label for="bill">
                <p>Informe o valor total da conta!</p>
            </label>
            <p>
                R$ <input type="number" placeholder="100" name="bill" id="bill" class="formInput" required>
            </p>
            <label for="serviceQual">
                <p>Você gostou de como foi atendido?</p>
            </label>
            <p>
                <select name="serviceQual" id="serviceQual" class="formSelect" required>
                    <option disabled selected value="0">-- Escolha uma opção!</option>
                    <option value="0.3">30% - Excelente</option>
                    <option value="0.2">20% - Bom</option>
                    <option value="0.15">15% - Aceitável</option>
                    <option value="0.10">10% - Ruim</option>
                    <option value="0.05">05% - Péssimo</option>
                </select>
            </p>
            <label for="people">
                <p>Quantas pessoas vão dividir a conta?</p>
            </label>
            <p>
                <input type="number" placeholder="1" name="people" id="people" class="formInput" required> pessoa(s)
            </p>
            <button type="submit" class="formSubmit">Calcular</button>
        </form>
    </div>
    <div id="totalTip">
        Gorjeta total:
        R$<span id="tip">0.00</span>
        <span id="each">cada</span>
    </div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
por LEVY GIMENES DA SILVA
| 52.2k xp | 9 posts
Assistente administrativo

Acabei substituindo a class "tipsForm" por uma id... e acabou funcionando. Mas ainda não entendo o porque funcionou com id e não com class.

solução!
por Lorena Garcia
| 8213.4k xp | 12017 posts
Alura Scuba Team Suporte Educacional

Olá Levy,

Então o erro ocorre porque o elemento <form> tem a classe "tipsForm", mas na linha 28 do códigoJavaScript você estava usando o ID:

document.getElementById('tipsForm')

Para buscar o elemento e adicionar o evento de submit.

Então quando você mudou para ID o HTML conseguiu encontrar o elemento e funcionou.

São pequenos detalhes que precisamos nos atentar.

Espero ter ajudado e bons estudos!