How to save user input into a variable in html and js

Question

i am making a game and at the start it asks for your name  I want this name to be saved as varible  i have this html code    lt form id  form  onsubmit  return false   gt   lt input   style position absolute top 80  left 5  width 40   type  text  id  userInput  gt   lt input   style position absolute top 50  left 5  width 40   type  submit     onclick  name    gt   lt  form gt    and this is javascript part   function name     var input   document getElementById  userInput    alert input

User · Answer

First  make your markup more portable reusable  I also set the button s type to  button  instead of using the onsubmit attribute  You can toggle the type attribute to submit if the form needs to interact with a server    lt div class  wrapper  gt   lt form id  nameForm  gt   lt div class  form-uname  gt       lt label id  nameLable  for  nameField  gt Create a username  lt  label gt       lt input id  nameField  type  text  maxlength  25  gt  lt  input gt   lt  div gt   lt div class  form-sub  gt       lt button id  subButton  type  button  gt Print your name  lt  button gt   lt  div gt   lt  form gt    lt div gt       lt p id  result  gt  lt  p gt  lt  div gt   lt  div gt    Next write a general function for retrieving the username into a variable  It checks to make sure the variable holding the username has it least three characters in it  You can change this to whatever constant you want   function getUserName     var nameField   document getElementById  nameField   value  var result   document getElementById  result     if  nameField length  lt  3        result textContent    Username must contain at least 3 characters         alert  Username must contain at least 3 characters      else       result textContent    Your username is      nameField        alert nameField         Next  I created an event listener for the button  It s generally considered the bad practice to have inline js calls   var subButton   document getElementById  subButton    subButton addEventListener  click   getUserName  false      Here is a working and lightly styled demo   CodePen demo of this answer

User · Answer

Like I use on PHP and JavaScript    lt input type  hidden  id  CatId  value   lt  php echo  categoryId    gt   gt    Update the JavaScript   var categoryId   document getElementById  CatId   value

User · Answer

It doesn t work because name is a reserved word in JavaScript  Change the function name to something else   See http   www quackit com javascript javascript reserved words cfm   lt form id  form  onsubmit  return false   gt       lt input style  position absolute  top 80   left 5   width 40    type  text  id  userInput    gt       lt input style  position absolute  top 50   left 5   width 40    type  submit  onclick  othername       gt   lt  form gt   function othername         var input   document getElementById  userInput   value      alert input

User · Answer

I found this to work best for me  https   jsfiddle net Lu92akv6   I found this to work for me try this fiddle  1    x000D   x000D  document getElementById  btnmyNumber   addEventListener  click   myFunctionVar   x000D  function myFunctionVar     x000D    var numberr   parseInt document getElementById  myNumber   value  10   x000D       alert numberr   x000D    if   numberr  gt  1    x000D   x000D      document getElementById  minusE5   style display    none   x000D   x000D   x000D   x000D     x000D      lt form onsubmit  return false   gt  x000D          lt input class  button button3  type  number  id  myNumber  value    min  0  max  30  gt  x000D          lt input type  submit  id  btnmyNumber  gt  x000D   x000D          lt  form gt  x000D   x000D   x000D

User · Answer

Change your javascript to   var input   document getElementById  userInput   value    This will get the value that has been types into the text box  not a DOM object

User · Answer

lt html gt           lt input type  text  placeholder   username  id  userinput  gt       lt br gt       lt input type  password  placeholder  password  gt       lt br gt       lt button type  submit  onclick  myfunc    id  demo  gt click me lt  button gt        lt script type  text javascript  gt          function myfunc                 var input   document getElementById  userinput                alert input value                   lt  script gt   lt  html gt

User · Answer

I mean a prompt script would work if the variable was not needed for the HTML aspect  even then in certain situations  a function could be used   x000D   x000D  var save user input   prompt  what needs to be saved         makes a variable of the prompt s answer if  save user input    null        if the answer is null  it is nothing   however  if it is nothing  it is cancelled  as seen below   If it is  null  it is what the user said  then assigned to the variable i think   but also null as in nothing in the prompt answer window  but ok pressed  So you cant do an or  null   which would look like  if  save user input    null     null     because  I also don t really know if this is right  the variable is  null   Very confusing alert  cancelled        alerts the user the cancel button was pressed  No long explanation this time        is an end for the if  i got stumped as to why it wasn   t working and then realised this  very important to remember   else   alert save user input     is what you said        alerts the user the variable and adds the string   is what you said  on the end   x000D   x000D   x000D

[javascript] How to save user input into a variable in html and js

Examples related to javascript

Examples related to html

Examples related to user-input