Cómo obtener un valor de texto de entrada en JavaScript

¿Cómo obtener un valor de texto de entrada en JavaScript?

<script language="javascript" type="text/javascript">
    lol = document.getElementById('lolz').value;
    function kk(){
    alert(lol);
    }
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
</body>

Cuando pongo lol = document.getElementById('lolz').value; fuera de la función kk(), como se muestra arriba, no funciona, pero cuando lo pongo dentro, funciona. ¿Alguien puede decirme por qué?

Author: bfavaretto, 2012-08-04
Source

12 answers

La razón por la que la función no funciona cuando lol está definida fuera de ella, es porque el DOM no está cargado todavía cuando se ejecuta JavaScript por primera vez. Debido a eso, getElementById volverá null (véase MDN ).

Ya ha encontrado la solución más obvia: al llamar a getElementById dentro de la función, el DOM se cargará y estará listo en el momento en que se llame a la función, y el elemento se encontrará como espera.

Hay algunas otras soluciones. Uno es para esperar hasta que se cargue todo el documento, así: 

<script type="text/javascript">
    var lolz;
    function onload() { 
        lolz = document.getElementById('lolz');
    }
    function kk(){
        alert(lolz.value);
    }
</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" onclick="kk();"/>
</body>

Tenga en cuenta el atributo onload de la etiqueta <body>. (En una nota al margen: el atributo language de la etiqueta <script> está obsoleto. No lo uses.)

Hay, sin embargo, un problema con onload: espera hasta todo (incluyendo imágenes, etc.) está cargada.

La otra opción es esperar hasta que el DOM esté listo (que suele ser mucho antes que onload). Esto se puede hacer con JavaScript "simple", pero es mucho más fácil usar una biblioteca DOM como jQuery.

Por ejemplo: 

<script type="text/javascript">
    $(document).ready(function() {
        var lolz = $('#lolz');
        var kk = $('#kk');
        kk.click(function() {
            alert(lolz.val());
        });
    });
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" id="kk" />
</body>

JQuery .ready () toma una función como argumento. La función se ejecutará tan pronto como el DOM esté listo. Este segundo ejemplo también usa .haga clic en () para enlazar el controlador onclick de kk, en lugar de hacerlo en línea en el HTML.

 63
Author: PPvG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-09 10:32:34

No utilice variables globales de esta manera. Incluso si esto pudiera funcionar, es un mal estilo de programación. Puede sobrescribir inadvertidamente datos importantes de esta manera. Haga esto en su lugar:

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

Si insistes en que var lol se establezca fuera de la función kk, entonces propongo esta solución: 

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
    <script type="text/javascript">
       var lol = document.getElementById('lolz');
       function kk() {
           alert(lol.value);
       }
    </script>
</body>

Tenga en cuenta que el elemento script debe seguir al elemento input al que se refiere, porque los elementos solo se pueden consultar con getElementById si ya se han analizado y creado.

Ambos ejemplos funcionan, probado en jsfiddler.

Editar : Eliminé el atributo language="javascript", porque está obsoleto. Ver Especificación W3 HTML4, el elemento SCRIPT :

Idioma = cdata [CI]

Obsoleto. Este atributo especifica el lenguaje de scripting del contenido de este elemento. Su valor es un identificador para el idioma, pero como estos identificadores no son estándar, este atributo ha sido en desuso a favor del tipo.

Y

Un elemento o atributo obsoleto es aquel que ha sido desactualizado por construcciones más recientes. [elements] Los elementos obsoletos pueden volverse obsoletos en futuras versiones de HTML. [This] Esta especificación incluye ejemplos que ilustran cómo evitar el uso de elementos obsoletos. […]

 13
Author: nalply,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-15 18:50:24

Observe que esta línea:

lol = document.getElementById('lolz').value;

Está antes del elemento <input> real en su marcado: 

<input type="text" name="enter" class="enter" value="" id="lolz"/>

Su código se analiza línea por línea, y la línea lol = ... se evalúa antes de que el navegador sepa sobre la existencia de una entrada con id lolz. Por lo tanto, document.getElementById('lolz') volverá null, y document.getElementById('lolz').value debería causar un error.

Mueva esa línea dentro de la función, y debería funcionar. De esta manera, esa línea solo se ejecutará cuando se llame a la función. Y usar var como otros sugerido, para evitar que sea una variable global:

function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}

También puede mover el script al final de la página. Mover todos los bloques de script al final de su HTML <body> es la práctica estándar hoy en día para evitar este tipo de problema de referencia. También tiende a acelerar la carga de la página, ya que los scripts que tardan mucho en cargarse y analizarse se procesan después de que el HTML se haya mostrado (en su mayoría).

 6
Author: bfavaretto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-04 18:24:35

Editar:

  1. Mueva su javascript al final de la página para asegurarse de que DOM (elementos html) se cargue antes de acceder a ellos (javascript al final para una carga rápida).
  2. Declare sus variables siempre como en el ejemplo usando var textInputVal = document.getElementById ('textInputId').valor;
  3. Use nombres descriptivos para entradas y elementos (hace más fácil entender su propio código y cuando alguien lo está mirando).
  4. Para ver más sobre getElementById, véase: http://www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. El uso de bibliotecas como jQuery hace que el uso de javascript sea cien veces más fácil, para obtener más información: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
 6
Author: Mauno Vähä,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-04 18:48:56 
<script type="text/javascript">
function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}


</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" id="lolz" value=""/>
    <input type="button" value="click" onclick="kk();"/>
</body>

Usa esto

 6
Author: DOCTYPE HTML,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-02 00:16:11

Como su lol es una variable local ahora, es una buena práctica usar la palabra clave var para declarar cualquier variable.

Esto puede funcionar para usted: 

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}
 2
Author: Shreedhar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-04 18:23:21

Todas las soluciones anteriores son útiles. Y usaron la línea lol = document.getElementById('lolz').value; dentro de la función function kk().

Lo que sugiero es que puedes llamar a esa variable desde otra función fun_inside() 

function fun_inside()
{    
lol = document.getElementById('lolz').value;
}
function kk(){
fun_inside();
alert(lol);
}

Puede ser útil cuando se construyen proyectos complejos.

 2
Author: htoniv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-05 06:51:30 
<script>
function subadd(){
subadd= parseFloat(document.forms[0][0].value) + parseFloat(document.forms[0][1].value) 
window.alert(subadd)  
}
</script>

<body>
<form>
<input type="text" >+
<input type="text" >
<input type="button" value="add" onclick="subadd()">
</form>
</body>
 2
Author: Scott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-10 09:55:48 
<input type="password"id="har">
<input type="submit"value="get password"onclick="har()">
<script>
    function har() {
        var txt_val;
        txt_val = document.getElementById("har").value;
        alert(txt_val);
    }
</script>
 2
Author: harsh mangalam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-18 15:34:54

Documento.getElementById ('id').valor

 1
Author: Selva Raj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-01 07:14:39

Cómo obtener un valor de texto de entrada en JavaScript

    var textbox;
    function onload() { 
        //Get value.
        textbox = document.getElementById('textbox');
    }

    function showMessage() { 
        //Show message in alert()
        alert("The message is: " + textbox.value);
    }
<body onload="onload();">
<div>
<input type="text" name="enter" class="enter" placeholder="Write something here!" value="It´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>
 1
Author: Jorgesys,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-10 04:07:59

La razón por la que esto no funciona es porque la variable no cambia con el cuadro de texto. Cuando inicialmente ejecuta el código obtiene el valor del cuadro de texto, pero después no se vuelve a llamar. Sin embargo, cuando define la variable en la función, cada vez que llama a la función, la variable se actualiza. Luego alerta a la variable que ahora es igual a la entrada del cuadro de texto.

 0
Author: user6797340,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-05 17:56:53