Criei um código para testar o funcionamento do trio HTML, CSS e JS. O código funciona, mas eu não entendo por quê a frase OBRIGADO PELA PARTICIPAÇÃO! aparece antes da função finalizar os cálculos (acredito estar relacionado com o comportamento do onclick). trio.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>trio-principal</title>
<link rel="stylesheet" href="trioStyle.css"/>
<script src="trioFunction.js"></script>
</head>
<body>
<h1>Chamando função externa para multiplicar:</h1>
<form>
<label>Digite um número:<input type="text" id="n1" ></label>
<label>Digite outro número:<input type="text" id="n2" ></label>
<!--============= BOtão onclick que chama a função" =======================-->
<input type="button" value="Multiplicar" onclick="calcular()">
</form>
<h2 id="resultado"></h2v>
<h3>OBRIGADO PELA PARTICIPAÇÃO! (Isto não deveria aparecer só depois?)</h3>
</body>
</html>trioFunction.js ( a função calcular() ):
function calcular() {
var n1 = parseInt(document.getElementById('n1').value);
var n2 = parseInt(document.getElementById('n2').value);
var res = 'Multiplicando ' + n1 + ' x ' + n2 + ' = ' + n1 * n2;
document.getElementById('resultado').innerHTML = res;
}trioStyle.css :
#resultado {
margin-left: 200px;
font-size: 25px;
color: blue;
}Alguém pode me explicar esse comportamento estranho (a meu ver)? Obrigado
