How to get an input text value in JavaScript

Question

How go get an input text value in JavaScript    lt script language  javascript  type  text javascript  gt      lol   document getElementById  lolz   value      function kk        alert lol          lt  script gt    lt body gt       lt input type  text  name  enter  class  enter  value    id  lolz   gt       lt input type  button  value  click  OnClick  kk     gt   lt  body gt    When I put lol   document getElementById  lolz   value  outside of the function kk    like shown above  it doesn t work  but when I put it inside  it works  Can anyone tell me why

User · Answer

Edit     Move your javascript to end of the page to make sure DOM  html elements  is loaded before accessing them  javascript to end for fast loading   Declare your variables always like in example using var textInputVal   document getElementById  textInputId   value  Use descriptive names for inputs and elements  makes easier to understand your own code and when someone other is looking it   To see more about getElementById  see  http   www tizag com javascriptT javascript-getelementbyid php Using library such as jQuery makes using javascript hundred times easier  to learn more  http   docs jquery com Tutorials Getting Started with jQuery

User · Answer

The reason that this doesn t work is because the variable doesn t change with the textbox  When it initially runs the code it gets the value of the textbox  but afterwards it isn t ever called again  However  when you define the variable in the function  every time that you call the function the variable updates  Then it alerts the variable which is now equal to the textbox s input

User · Answer

Notice that this line   lol   document getElementById  lolz   value    is before the actual  lt input gt  element on your markup    lt input type  text  name  enter  class  enter  value    id  lolz   gt    Your code is parsed line by line  and the lol       line is evaluated before the browser knows about the existance of an input with id lolz  Thus  document getElementById  lolz   will return null  and document getElementById  lolz   value should cause an error   Move that line inside the function  and it should work  This way  that line will only run when the function is called  And use var as others suggested  to avoid making it a global variable   function kk        var lol   document getElementById  lolz   value      alert lol       You can also move the script to the end of the page  Moving all script blocks to the end of your HTML  lt body gt  is the standard practice today to avoid this kind of reference problem  It also tends to speed up page load  since scripts that take long to load and parse are processed after the HTML has been  mostly  displayed

User · Answer

document getElementById  id   value

User · Answer

lt script type  text javascript  gt  function kk        var lol   document getElementById  lolz   value      alert lol        lt  script gt    lt body onload  onload     gt       lt input type  text  name  enter  class  enter  id  lolz  value     gt       lt input type  button  value  click  onclick  kk      gt   lt  body gt    use this

User · Answer

The reason you function doesn t work when lol is defined outside it  is because the DOM isn t loaded yet when the JavaScript is first run  Because of that  getElementById will return null  see MDN    You ve already found the most obvious solution  by calling getElementById inside the function  the DOM will be loaded and ready by the time the function is called  and the element will be found like you expect it to   There are a few other solutions  One is to wait until the entire document is loaded  like this    lt script type  text javascript  gt      var lolz      function onload              lolz   document getElementById  lolz              function kk            alert lolz value          lt  script gt    lt body onload  onload     gt       lt input type  text  name  enter  class  enter  value    id  lolz   gt       lt input type  button  value  click  onclick  kk      gt   lt  body gt    Note the onload attribute of the  lt body gt  tag   On a side note  the language attribute of the  lt script gt  tag is deprecated  Don t use it    There is  however  a problem with onload  it waits until everything  including images  etc   is loaded   The other option is to wait until the DOM is ready  which is usually much earlier than onload   This can be done with  plain  JavaScript  but it s much easier to use a DOM library like jQuery   For example    lt script type  text javascript  gt        document  ready function             var lolz       lolz            var kk       kk            kk click function                 alert lolz val                          lt  script gt    lt body gt       lt input type  text  name  enter  class  enter  value    id  lolz   gt       lt input type  button  value  click  id  kk    gt   lt  body gt    jQuery s  ready   takes a function as an argument  The function will be run as soon as the DOM is ready  This second example also uses  click   to bind kk s onclick handler  instead of doing that inline in the HTML

User · Answer

All the above solutions are useful  And they used the line lol   document getElementById  lolz   value  inside the function function kk     What I suggest is  you may call that variable from another function fun inside     function fun inside         lol   document getElementById  lolz   value    function kk    fun inside    alert lol       It can be useful when you built complex projects

User · Answer

Do not use global variables in this way  Even if this could work  it s bad programming style  You can inadvertently overwrite important data in this way  Do this instead    lt script type  text javascript  gt     function kk           var lol   document getElementById  lolz   value         alert lol         lt  script gt    If you insist var lol to be set outside the function kk  then I propose this solution    lt body gt       lt input type  text  name  enter  class  enter  value    id  lolz   gt       lt input type  button  value  click  OnClick  kk     gt       lt script type  text javascript  gt         var lol   document getElementById  lolz           function kk                alert lol value                 lt  script gt   lt  body gt    Note that the script element must follow the input element it refers to  because elements are only queryable with getElementById if they already have been parsed and created   Both examples work  tested in jsfiddler   Edit  I removed the language  javascript  attribute  because it s deprecated  See W3 HTML4 Specification  the SCRIPT element      language   cdata  CI            Deprecated  This attribute specifies the scripting language of the contents of this element  Its value is an identifier for the language  but since these identifiers are not standard  this attribute has been deprecated in favor of type       and     A deprecated element or attribute is one that has been outdated by newer constructs        Deprecated elements may become obsolete in future versions of HTML        This specification includes examples that illustrate how to avoid using deprecated elements

User · Answer

How to get an input text value in JavaScript    x000D   x000D      var textbox  x000D      function onload      x000D            Get value  x000D          textbox   document getElementById  textbox    x000D        x000D   x000D      function showMessage      x000D            Show message in alert   x000D          alert  The message is      textbox value   x000D        x000D   lt body onload  onload     gt  x000D   lt div gt  x000D   lt input type  text  name  enter  class  enter  placeholder  Write something here   value  It  s a wonderful day   id  textbox   gt  x000D   lt input type  button  value  Show this message   onClick  showMessage      gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt script gt  function subadd    subadd  parseFloat document forms 0  0  value    parseFloat document forms 0  1  value   window alert subadd       lt  script gt    lt body gt   lt form gt   lt input type  text   gt    lt input type  text   gt   lt input type  button  value  add  onclick  subadd    gt   lt  form gt   lt  body gt

User · Answer

lt input type  password id  har  gt   lt input type  submit value  get password onclick  har    gt   lt script gt      function har             var txt val          txt val   document getElementById  har   value          alert txt val          lt  script gt

User · Answer

as your lol is local variable now  its good practice to use var keyword for declaring any variables   this may work for you    function kk      var lol   document getElementById  lolz   value    alert lol

[javascript] How to get an input text value in JavaScript

Examples related to javascript

Examples related to text

Examples related to input

Examples related to get