0
<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="shortcut icon" href="#" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"href="./css/normalize.css"/>
    <link rel="stylesheet"href="./css/style.css"/>
    <script src="./js/app.dev.js"></script>

    <title>Editor de Codigo</title>
</head>
<body>
    <div class="container">
        <textarea
            onkeypress="update()" 
            id="text" 
            class="text" 
            placeholder="Escribe tu codigo aqui"
        ></textarea>
        <iframe srcdoc="<h1>Hola mundo</h1>"></iframe>
    </div>
</body>
</html>


.JS

const text = document.getElementById("#text").value;


const update = () => {
    console.log(text);
    
}

Al aplicar el selector document.querySelector("#text") o el document.getElementById("#text) me da error me dice que es null... ya he buscado el error pero no lo encuentro. Si alquien me puede ayudar gracias.He buscado por google y nada. Revisando el HTML veo todo correcto, ademas he cambiado ya el tipo de comillas de dobles a simple y no va.

2
  • 3
    El problema es que en la linea del getElementById("#text") tienes que quitar el "#" dejalo asi getElementById("text")
    – cupax64
    Commented el 28 mar. 2021 a las 10:26
  • muchas gracias por tu colaboracion
    – Miguel
    Commented el 29 mar. 2021 a las 19:39

1 respuesta 1

1

En Javascript puro, para seleccionar por id pones directamente el id del elemento, sin anteponer #, como sí debe hacerse en el caso de usar querySelector o en el caso de jQuery.

Pero hay otro problema en tu código. Tú obtienes el value del elemento al tiempo que lo seleccionas por id, al hacer esto:

var text = document.getElementById("text").value;

Ahí la variable no es interactiva, se quedará siempre con el value que tenía en ese momento y no cambiará más. Incluso si la referencia al elemento se crease dentro del contexto dinámico, si la creas directamente con el value y necesitaras obtener otra propiedad del elemento (como el placeholder por decir algo), esa referencia ya no te sirve, tendrías que crear otra, y, lo que es peor, volver a MOLESTAR al DOM para eso... Por eso en Javascript las buenas prácticas recomiendan crear siempre referencias a los elementos sin más, una sola vez y luego en el contexto dinámico apelar a los valores u otras propiedades usando la referencia creada. En este caso precisamente interesa ir conociendo el valor dentro de la función.

/*Sólo creamos referencia al elemento sin más*/
var text = document.getElementById("text");

const update = () => {
    /*Obtenemos cada vez el value*/
    console.log(text.value);
}
        <textarea
            onkeypress="update()" 
            id="text" 
            class="text" 
            placeholder="Escribe tu codigo aqui"
        ></textarea>


Con querySelector sí se usa # para seleccionar por ID:

/*Sólo creamos referencia al elemento sin más*/
var text = document.querySelector("#text");

const update = () => {
    /*Obtenemos cada vez el value*/
    console.log(text.value);
}
        <textarea
            onkeypress="update()" 
            id="text" 
            class="text" 
            placeholder="Escribe tu codigo aqui"
        ></textarea>

Otra cosa: el uso de funciones in-line, como aquí ocurre: <textarea onkeypress="update()" ... se considera también una mala práctica. Entre otras cosas hace que el HTML sea dependiente de JS y eso podría traer graves problemas de mantenimiendo. W3C Recommendation es claro en ese punto y recomienda respetar la Separación de estructura y comportamiento..

2
  • Muchísimas gracias de verdad, me has ayudado mucho porque ya me tenia agobiado con este código.... Buena tu explicación.... Gracias Gracias
    – Miguel
    Commented el 29 mar. 2021 a las 19:41
  • @Miguel considera marcar la respuesta si la misma ha servido para solucionar tu problema, para que la pregunta no aparezca como sin resolver. Me alegro de haberte ayudado. Saludos.
    – A. Cedano
    Commented el 29 mar. 2021 a las 19:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.