Dúvidas em Código: HTML, CSS e JavaScript. Ele não executa a função de Somar

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Soma de Números</title>

<style>

    body {

        font: normal 18pt Arial;

    }

    input {

        font: normal 18pt Arial;

        width: 100px;

    }

    div#res {

        margin-top: 20px;

    }

</style>

<h1>Somando Valores</h1>

<input type="number" name="txtn1" id="txtxn1"> +

<input type="number" name="txtn2" id="txtxn2">

<input type="button" value="Somar" onclick="somar()">

<div id="res">Resultado</div>

<script>

    function somar(){

        var tn1 = window.document.getElementsById('txtn1')

        var tn2 = window.document.querySelector('input#txtn2')

        var res = window.document.getElementsById('res')

        var n1 = Number(tn1.value)

        var n2 = Number(tn2.value)

        var s = n1 + n2

        res.innerHTML = `A soma entre ${n1} e ${n2} é igual a <strong>${s}</strong>`

    }
</script>