duvida sobre alterar o HTML (Faça como eu fiz: Brinque com seletores no JS)

dessa forma eu alterei o HTML para eu selecionar a tag input no javascript de maneira mais fácil pra mim! dessa forma deu certo, só que de outra forma. ou tem problema mais adiante?

1- HTML (Que fiz para resolver o desafio)

    <title>Desafio!</title>

    <link rel="icon" type="image/png" href="RNK-semFundo.png" alt="Icon da galinha">
    <link rel="stylesheet" href="desafio-estilo.css">

</head>
<body>
    <h1> Alura fone </h1>
    <section class="teclado">
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="0">
    </section>
    <input type="tel" class="telefone" placeholder="Digite seu telefone">
</body>

2- CSS (modificado da aula. achei muito grudado o input[type=tel] apenas, então resolvi da uma margin pra cima.)

margin-top: 24px;

input[type=tel] { background-color: #cccccc; border-radius: 10px; font-family: monospace; font-size: 22px; height: 40px; margin-top: 24px; margin-bottom: 24px; padding: 10px; text-align: center; width: 280px; }

3 - JavaScript (minha forma de selecionar o input type="tel".)

document.querySelector('.telefone');