<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tarefa</title>
</head>
<body>
<form class="calculadora">
<button class="botao">Calcula</button>
<input class="numero">
<input class="tabuada">
<span class="resultado"></span>
</form>
<script>
function buscaElemento(seletor) {
return document.querySelector(seletor);
}
function aplicaTabuada(numero, tabuada) {
return numero * tabuada;
}
var botao = buscaElemento('.botao');
var numero = buscaElemento('.numero');
var tabuada = buscaElemento('.tabuada');
var resultado = buscaElemento('.resultado');
botao.addEventListener('click', function(event) {
resultado.textContent = aplicaTabuada(numero.value, tabuada.value);
var calculadora = document.querySelector(".calculadora");
event.preventDefault();
calculadora.reset();
});
</script>
</body>
</html>Eu quis adicionar um reset após o botão ter sido clicado, mas reparei que ele só funciona quando os elementos à serem resetados estão dentro de um form. Tentei com section e div, mantendo a mesma classe "calculadora", no entanto recebo o erro "calculadora.reset is not a function".
Gostaria de saber o motivo.
