1
resposta

Eu não preciseu alterar a função reset. Alguém consegue explicar o motivo?

Index.html:

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <script src="script.js" defer></script>
    <h1></h1>
    <p>
      <label for="quantidade">Quantidade:</label>
      <input name="quantidade" id="quantidade" type="text" />
    </p>

    <p>
      <label for="valor">Valor: </label>
      <input name="valor" id="valor" type="text" />
    </p>
    <div>
      <button onclick="calcular()" id="desconto">Calcular o Desconto</button>
    </div>
  </body>
</html>

script.js:

let texto = document.querySelector('h1');
texto.innerHTML = 'Título';

function calcular() {
  let quantidade = parseInt(document.getElementById('quantidade').value);
  let valor = parseFloat(document.getElementById('valor').value);

  let total = quantidade * valor;

  if (quantidade >= 10 || valor >= 100) {
    total = total - (total / 100) * 5;
    alert(`Valor total: ${total} `);
    reiniciar()
  } else {
    alert('Não tem desconto')
    reiniciar()
  }
}

function reiniciar() {
  quantidade.value = '';
  valor.value = '';
}

É recomendado alterar a function resetar para

function reiniciar() {
  document.getElementById('quantidade').value = '';
  document.getElementById('valor').value = '';
}

Mas como eu fiz uma label, parece que não foi necessário. Alguém poderia me explicar a diferença?

1 resposta

Olá, Igor! Como vai?

O código está funcionando porque você está usando variáveis com o mesmo nome dentro e fora da função calcular. Isso pode ser confuso e levar a erros.

  1. Variáveis com o mesmo nome: Dentro da função calcular, você define duas variáveis chamadas quantidade e valor. No entanto, variáveis com os mesmos nomes já existem fora da função.

  2. Escopo de variáveis: As variáveis definidas dentro de uma função só são acessíveis dentro dessa função. Isso é chamado de escopo de variável.

  3. Atribuição de valores: Quando você chama a função reiniciar, as variáveis dentro da função calcular são reatribuídas. Isso não afeta as variáveis com o mesmo nome fora da função.

O problema com o código atual é que você está redefinindo as variáveis quantidade e valor dentro da função reiniciar, mas essas variáveis não são as mesmas usadas na função calcular. Para corrigir o problema, você precisa usar os nomes completos das variáveis ao acessá-las dentro da função reiniciar.

function reiniciar() {
  document.getElementById('quantidade').value = '';
  document.getElementById('valor').value = '';
}

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.