How can I save user input as a variable in javascript with a button onclick?

Question

I want to save what the user types in the input as a variable when the user clicks the button. Than, I want to console.log the new variable with the users information. What am I doing wrong?

<html>    
    <div class="container bg-light">
        <div class="row">
    
          <div class="col-md-3 bg-danger">
          </div>
          <div class="col-md-6">
            <div class="form-group text-center">
              <h1>Saving User Data as a Variable with Javascript</h1>
    
              <div class="form-group">
                <input id="userdata" class="form-control">
              </div>
              <div class="form-group mx-auto text-center">
    
                <button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
              </div>
            </div>
          </div>
          <div class="col-md-3 bg-danger">
          </div>
        </div>
      </div>
      
      <script>
      function saveUserData() 
      {
    	// store the tag with id="sign" in var userdata
    	var userdata = document.getElementById("userdata");
      }
      
      // confirm the element exists and what value the user submits
    	console.log(userdata);
    	console.log("users value is: " + userdata.value);
      </script>
</html>

You define userdata inside function saveUserData() but you try to show the value out of the function where userdata is not defined. Your script is also immediatly executed so you see an empty value — Fabio_MO
– Fabio_MO, Commented Apr 3, 2018 at 9:30

Ishwar Patil · Accepted Answer · 2018-04-03 09:24:35Z

function saveUserData() {
   var name = document.getElementById('userdata').value;
   
   console.log("users value is: " + name);
}

<div class="container bg-light">
        <div class="row">
    
          <div class="col-md-3 bg-danger">
          </div>
          <div class="col-md-6">
            <div class="form-group text-center">
              <h1>Saving User Data as a Variable with Javascript</h1>
    
              <div class="form-group">
                <input id="userdata" class="form-control">
              </div>
              <div class="form-group mx-auto text-center">
    
                <button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
              </div>
            </div>
          </div>
          <div class="col-md-3 bg-danger">
          </div>
        </div>
      </div>

Salim Ahmed · Accepted Answer · 2018-04-03 10:09:53Z

0

try this

function saveUserData() {
 var userdata = document.getElementById('userdata').value;
 console.log("users value is: " + userdata);
}

edited Apr 3, 2018 at 10:09

answered Apr 3, 2018 at 9:28

Salim Ahmed

838 bronze badges

3 Comments

Tony Carbetta Over a year ago

didn't work I got this error... Uncaught ReferenceError: saveUserData is not defined at HTMLButtonElement.onclick

Salim Ahmed Over a year ago

This code was ok. you can't defined saveUserData function at HTMLButtonElement.

Munim Munna Over a year ago

@TonyCarbetta Edit your question to your latest code. And this answer needs some explanations.

Collectives™ on Stack Overflow

How can I save user input as a variable in javascript with a button onclick?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related