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

Front-end
,
#1 
<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>
#2

O id do elemento é txtxn1, mas no getElementsById você busca por txtn1 (veja que tem um “x” a mais no id do elemento). O mesmo vale para txtn2. Ah, e o nome correto da função é getElementById (“Element” no singular, repare que você usou “Elements”).

Aliás, porque em um você usa getElementsById e no outro querySelector? Escolha um (qualquer um) e mantenha a consistência, use o mesmo em todos os casos - a menos que haja um bom motivo para usar outro: por exemplo, querySelector é mais flexível e aceita mais do que um simples id, mas no seu caso você só busca por id então seria o suficiente fazer:

   var tn1 = window.document.getElementById('txtn1');
   var tn1 = window.document.getElementById('txtn2');

Lembrando, é claro, de corrigir o id que está no HTML, que tem um “x” a mais.

Aproveitando, crie o hábito de colocar ; no final das linhas. Pode parecer “frescura”, e sei que o JavaScript “aceita” o código sem ponto e vírgula e “funciona”, mas isso evita algumas situações bizarras que podem ocorrer se você não usá-los, como essa e essa (veja mais sobre isso aqui).