Front - end não funciona

Front-end
, , ,
#1 
<!DOCTYPE html>
<html lang="pt-BR">
<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>DETRAN</title>
    <style>
        body {
            font: normal 18pt Arial;
        }
        input {
            font: normal 18pt Arial;
            width: 100px;
        }
        div#res {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Sistema de Multas</h1>
    Velocidade do Carro: <input type="number" name="txtvel" id="txtvel"> Km/h
    <!----cuidado com as aspas duplas e simples-->
    <input type="button" value="Verificar" onclick="calcular()">
    <div id="res">

    </div>
    <script>
        function calcular() {
        var txtv = window.document.querySelector('input#txtxvel')
        var res = window.document.querySelector('div#res')
        var vel = Number(txtv.value)
        //id é com hashtag e class é com ponto em CSS
        res.innerHTML = `<p>Sua velocidade atual é de <strong> ${vel} </strong></p>`
        if (vel > 60){
        res.innerHTML += `<p>Você está <strong>MULTADO> por excesso de velocidade`
        }
        res.innerHTML += `<p>Dirija sempre com cinto de segurança</p>`
        }
    </script>
</body>
</html>
#2

Por favor, especifique exatamente o quê não está funcionando

#3

Vc está tentando recuperar um elemento pelo ID errado. O certo é txtvel em vez de txtxvel.