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>
