2
respostas

Uncaught TypeError | event.preventDeaful( ) não funciona

Estou fazendo uma calculadora de gorjetas, mas o submit nao funciona... Estou aprendendo essa funcionalidade. no console o erro é esse: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') Vou deixar o html e o js aqui...

<body >
    <div id="container">
        <div>
            <h1 class="title">Calculadora de Gorjetas</h1>
        </div>
        <div>
            <form class="tipsForms" id="tipsForms">
                <label for="conta"><p>Quanto ficou a compra?</p></label>
                <p>
                    R$ <input type="number" min="0" placeholder="100,00" name="conta" id="conta" class="formInput" required>
                </p>

                <label for="serviceQual"><p>Como foi seu serviço</p></label>
                <p>
                    <select name="serviceQual" id="serviceQual" class="formSelect" >
                        <option value="0.3">30% - Incrível</option>
                        <option value="0.2">20% - Bom</option>
                        <option value="0.1">10% - Aceitável</option>
                        <option value="0.05">05% - Ruim</option>
                        <option value="0">0% - Péssimo</option>
                        <option disabled selected>-- Selecione</option>
                    </select>
                </p>

                <label for="people"><p>Quantas pessoas vão dividir a conta?</p></label>
                <p><input type="number" min="1" name="people" placeholder="0" id="people" class="formInput" required> pessoa(s)</p>

                <button type="submit" class="formSubmit">Calcular</button>
            </form>
        </div>
        <div id="totalTips">
            <p>Gorjeta total: R$<span id="tip">0.00</span></p>
            <p id="each">cada</p>
        </div>
    </div>
    <script>

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

function calcularTip(event){
    event.preventDeaful()

    let conta = document.getElementById('conta').value;
    let serviceQual = document.getElementById('serviceQual').value;
    let numeroDePessoas = document.getElementById('people').value;

    if (numeroDePessoas == 1){
        document.getElementById('each').style.display = "none"
    }

    let total = conta * serviceQual / numeroDePessoas
    total = total.toFixed(2)
    document.getElementById('tip').innerHTML = total
    document.getElementById('totalTips').style.display = "block"
}

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

    </script>
</body>
2 respostas

Oi Helena, tudo bem?

Você definiu o id como tipsForms: <form class="tipsForms" id="tipsForms">, porém, você esqueceu a letra s e escreveu tipsForm em: document.getElementById('tipsForm').

Deixe da seguinte forma: document.getElementById('tipsForms')

Caso sua dúvida tenha sido solucionada não esqueça de marcar a solução para que o tópico seja encerrado.

Bons estudos.

Olá! Além do que o Diego comentou, preventDefault() está escrito errado (preventDeaful()).

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software