ex08.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Somando números</title>
    <style>
        body{
            font: normal 17pt Arial;
        }
        input{
            font: normal 14pt Arial;
            width: 100px;
        }
        div#res{
            margin-top: 30px;
            background-color: teal;
            color: white;
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>Somando valores</h1>
    <input type="number" name="txtn1" id="txtn1">+
    <input type="number" name="txtn2" id="txtn2">
    <input type="button" value="somar" onclick="somar()">
    <div id="res">Resultado:</div>
    <script>
        function somar(){
            var txt1 = document.getElementById('txtn1')
            var txt2 = document.querySelector('input#txtn2')
            var res = document.getElementById('res')
            var n1 = Number(txt1.value)
            var n2 = Number(txt2.value)
            var s = n1+n2
            res.innerHTML = `A soma é: ${s}`
        }
    </script>


</body>
</html>