Console desaparecendo
Estou fazendo um simples exercício de javascript afim de aprender mais sobre a linguagem, sou leigo no assunto.
Peguei um exercício simples de aplicação de juros para refazer.
Esse é o exercício pronto funcionando:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Gab</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("botao").onclick = function(){
calcular();
}
}
function calcular(){
var elementos_valor = document.getElementById("txtvalor");
var elementos_parcela = document.getElementById("txtparcelas");
var elementos_resposta = document.getElementById("txtresult");
var valorcompra = parseFloat(elementos_valor.value);
var qtdparcelas = parseInt(elementos_parcela.value);
var msg = "";
var valorfinal = 0;
var cor = "";
if (qtdparcelas == 1){
valorfinal = valorcompra;
msg = "1X" + valorfinal;
cor="#16C4F8"
}else if (qtdparcelas == 2){
valorfinal = (valorcompra + (valorcompra * 0.03))/2;
msg = "2X" + valorfinal;
cor = "#f87504";
}else{
valorfinal = (valorcompra + (valorcompra* 0.07))/4;
msg = "4X" + valorfinal;
cor = "#d93c3c";
}
elementos_valor.value = "";
elementos_resposta.value = msg;
elementos_resposta.style.backgroundColor = cor;
}
</script>
</head>
<body>
<form>
Valor da compra: <br>
<input type="text" id="txtvalor"><br>
Parcelas:<br>
<select id ="txtparcelas">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
<br>
Valor das parcelas:<br>
<input type="text" id="txtresult" readonly><br>
<input type="button" value="calcular" id="botao">
</form>
</body>
</html>
Tentei realizar o mesmo exercício só que sem olhar e da minha forma:<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 1</title>
<script>
function calcular(){
console.log("test");
let valorDaCompra = parseFloat(document.getElementById("valorDaCompra").value);
let qtdeParcelas = parseInt(document.getElementById("qtdeParcelas").value);
let valorFinal = document.getElementById("resultado");
let msg = "";
let resultado = 0;
if(qtdeParcelas == 1){
valorFinal = valorDaCompra;
msg = "1X" + valorFinal;
console.log(msg);
}else if (qtdeParcelas == 2){
valorFinal = (valorDaCompra + (valorDaCompra * 0.03))/2;
msg = "2X" + valorFinal;
console.log(msg);
}else{
valorFinal = (valorDaCompra + (valorDaCompra * 0.07))/4;
msg = "4X" + valorFinal;
console.log(msg);
}
document.getElementById("resultado").value = msg;
}
</script>
</head>
<body>
<form>
Valor da compra:<br>
<input type="text" id="valorDaCompra"><br>
Parcelas:<br>
<select id="qtdeParcelas">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
<button style="margin-bottom: 7px" id="botao" onclick="calcular()">Calcular</button><br>
Valor final <br>
<input type="text" id="resultado" readonly>
</form>
</body>
</html>
Porém eu errei em algum lugar e quando eu abro o console pra tentar debugar ele simplesmente mostra o erro e depois desaparece no mesmo instante sem dar chance pra eu ver onde está o erro. Fiz um gif para tentar mostrar melhor o que esta acontecendo, em anexo.
Discussão (1)
Carregando comentários...