Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Adam maitland
PLUS
Adam maitland
Courses Plus Student 211 Points
Posted by Adam maitland
Adam maitland
Courses Plus Student 211 Points

.value not updating ?

Here is my code :

<html>
  <body>
    <div class="wrapper">
      <input type="text" id="name">
      <input type="submit" value="send" id="button">
    </div>

  <script>
    var button = document.getElementById('button');

    function get() {
      var user_name = document.getElementById("name").value;
      console.log(user_name);
    }

      button.onclick = get();

    </script>
  </body>
</html>

The console.log should return the value of the input into the console but nothing happens! I have tried many different ways but nothing seems to be working.

5 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Adam,

First up, please have a read of Posting Code to the Forum when posting code, I have updated your post to fix the formatting.

You have a simple issue with your code which is you're executing your get function rather than assigning it as a reference which will prevent your onclick event from working along with printing an empty value to your console when the page loads. See the below for the correct code.

button.onclick = get;

Happy coding!

Adam maitland
Adam maitland
Courses Plus Student 211 Points
Adam maitland
Adam maitland
Courses Plus Student 211 Points

Thanks for your answer Chris but is still coming back as undefined ? here is the code with your update:

<div class="wrapper">

                <input type="text" id="name">
                <input type="submit" value="send" id="button">

</div>

and the javascript 

var button = document.getElementById('button');

        function get() {

        var user_name = document.getElementById("name").val;
        console.log(user_name);

        }

        button.onclick = get;
Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Your original get function had nothing wrong with it, .val should be .value.

Dylan Aresu
Dylan Aresu
9,687 Points
Dylan Aresu
Dylan Aresu
9,687 Points

try .val instead of .value :)

Adam maitland
Adam maitland
Courses Plus Student 211 Points
Adam maitland
Adam maitland
Courses Plus Student 211 Points

Thanks for your answer but that just returns undefined

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

.val is for jQuery, not vanilla JavaScript.

Dylan Aresu
Dylan Aresu
9,687 Points
Dylan Aresu
Dylan Aresu
9,687 Points

instead of "name" try name and ...

document.getElementById(name).value ??

Dylan Aresu
Dylan Aresu
9,687 Points
Dylan Aresu
Dylan Aresu
9,687 Points

if all else fails use JQUERY.. this will 100% work. just link the jquery library at the bottom of your html page in a script src like this.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

//this does the exact same thing. $("#user_name").val()

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

jQuery isn't a solution as it adds an enormous amount of overhead to a page for something that can be achieved with one line of JavaScript.