¿Alguen me podria explicar mejor como funciona el querySelector? | Lógica de programación: Conceptos primordiales | Alura Latam

6
respuestas

por Jorge Octavio Totena Jaramillo

| 155k xp | 23 posts

No entendi muy bien la funcionalidad del document.querySelector, podría alguien por favor aclararme mejor su uso?

<meta charset="UTF-8">

<input/> 
<button> Verificar si acertó con el secreto </button>

<script>
    var secreto = 5;
    var input = document.querySelector("input"); // consulta un valor que le asignemos y le pasamos un parametro

    function verificar() {

        if(parseInt(input.value) == secreto) {

            alert("Usted acertó");


        }
        else {

            alert("Usted erró");


        }



    }

    var button = document.querySelector("button");
    button.onclick = verificar; //agrega un evento para cuando cliquee en el boton


</script>

6 respuestas

por Evelyn

| 259.3k xp | 333 posts

16/01/2022

Hola Jorge. El método querySelector() devuelve el primer elemento resultante que coincide con uno o más selectores CSS especificados en el documento. En este código te devuelve el primer elemento que en este caso de button: var button = document.querySelector("button");

por Luis David Corrales Olaya

| 186.4k xp | 107 posts

16/01/2022

Hola Jorge, la función de document.querySelector() consiste en seleccionar un elemento de la página HTML para luego utilizarlo. Cuando se emplea este método, devuelve a todo el elemento con su etiqueta y contenido. Por ejemplo, si queremos seleccionar y traer al elemento botón desde HTML a Javascript utilizamos document.querySelector("button"); Y esto nos devuelve <button> Verificar si acertó con el secreto </button> así tal cual. Por tanto, como este método selecciona y devuelve un elemento de HTML lo ideal es guardarlo en una variable para luego utilizarlo. Como lo tienes en tú código var button = document.querySelector("button"); . Por otra parte, si ahora deseas extraer el valor o contenido del elemento que seleccionaste (en este caso <button> Verificar si acertó con el secreto </button> debes aplicarle un método ya sea.textContento .value . Por ejemplo, button.textContent me devolverá solo el contenido del elemento es decir,Verificar si acertó con el secreto . Un saludo

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad