Javascript - User input through HTML input tag to set a Javascript variable

Question

I want there to be a textbox on my screen like the one i m typing in now  that you can type in then click a submit button and it sends whatever you typed in the box to javascript and javascript prints it out Here is my code This is the part that works    lt html gt   lt body gt       lt input type  text  id  userInput   gt give me input lt  input gt       lt button onclick  test    gt Submit lt  button gt       lt script gt          function test                         var userInput   document getElementById  userInput   value              document write userInput                  lt  script gt   lt  body gt   lt  html gt    OK so that s nice  but lets say I want input from that textbox and button while I m already in a function and don t want to restart the function   Thanks   Jake

User · Accepted Answer

When your script is running  it blocks the page from doing anything   You can work around this with one of two ways    Use var foo   prompt  Give me input     which will give you the string that the user enters into a popup box  or null if they cancel it  Split your code into two function - run one function to set up the user interface  then provide the second function as a callback that gets run when the user clicks the button

User · Answer

I tried to send add input tag s values into JavaScript variable which worked well for me  here is the code    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script type  text javascript  gt              function changef                             var ctext document getElementById  c   value               document writeln ctext                           lt  script gt       lt  head gt       lt body gt           lt input type  text  id  c  onchange  changef     gt            lt button type  button  onclick  changef    gt click lt  button gt       lt  body gt    lt  html gt

User · Answer

Late reading this  but   The way I read your question  you only need to change two lines of code         Accept user input  function writes back on screen    lt input type  text  id  userInput   gt  give me input lt  input gt   lt button onclick  test    gt Submit lt  button gt    lt  -- add this line for function to write into -- gt   lt p id  demo  gt  lt  p gt       lt script type  text javascript  gt  function test        var userInput   document getElementById  userInput   value      document getElementById  demo   innerHTML   userInput     lt  script gt

User · Answer

This is bad style  but I ll assume you have a good reason for doing something similar    lt html gt   lt body gt       lt input type  text  id  userInput  gt give me input lt  input gt       lt button id  submitter  gt Submit lt  button gt       lt div id  output  gt  lt  div gt       lt script gt          var didClickIt   false          document getElementById  submitter   addEventListener  click  function                   same as onclick  keeps the JS and HTML separate             didClickIt   true                       setInterval function                   this is the closest you get to an infinite loop in JavaScript             if  didClickIt                     didClickIt   false                     document write causes silly problems  do this instead  or better yet  use a library like jQuery to do this stuff for you                  var o document getElementById  output   v document getElementById  userInput   value                  if o textContent   undefined                       o textContent v                   else                      o innerText v                                            500        lt  script gt   lt  body gt   lt  html gt

[javascript] Javascript - User input through HTML input tag to set a Javascript variable?

Examples related to javascript

Examples related to html

Examples related to input

Examples related to user-input