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

Posted by olu adesina
olu adesina
23,007 Points

Storing a value returned from a function in a variable

Im trying to store the value input from a form in a variable but when i try to log it to the console i get nothing 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <header>
        <h1>Movie Rating Game</h1>
    </header>

    <div>

    </div>
    <div>
        <form>
             Enter your Name:
             <input id="playerName" type="text" name="name">
             <input type="submit" value="Submit" onclick="collectName()">


        </form>


    </div>

    <footer>


    </footer>




</body>
<script>
      var player = function collectName(){
                   var playerName = document.getElementById('playerName').value;
                   return playerName
                   }


console.log(player);

</script>
</html>

2 Answers

Shayne Laufenberg
Shayne Laufenberg
4,213 Points

So there is many problems with the current code, so i'll try to help you out the best I can and if you have any questions you can just ask me. So firstly there is no need for us to use a form or some of the other tags currently in the code, some of them are empty and will end up causing more confusion for the browser itself.

I decided in my solution to use a div currently due to an empty form tag which isn't needed in this case and inside the javascript I took what you had and put it together so that you can get an idea of where it went wrong. Basically you want to create a function but you don't really want to return anything. Instead using our scopes we can create a javascript variable outside of our function and store the value of playerName everytime the Submit Button is clicked, from there we execute a console.log to see the new name for our player.

I hope this helps you better understand javascript and how it can work with html to do great things :)

<!DOCTYPE html>
<html>
  <head>
      <title></title>
  </head>
  <body>
      <header>
          <h1>Movie Rating Game</h1>
      </header>

      <div>

          <div>
               Enter your Name:
               <input id="playerName" type="text" name="name">
               <input type="submit" value="Submit" onclick="collectName()">
          </div>

      </div>

  </body>

  <script>

    // Define playerName as Null //
    var playerName = null;

    // Define collectName Function //
    var collectName = function(){

        // Set Player Name equal to Input Value #playerName //
      playerName = document.getElementById('playerName').value;

      // Display Name Inside Log //
      console.log(playerName);
    }


  </script>
</html>
olu adesina
olu adesina
23,007 Points

Thanks for this its working perfectly . if we don't define player name first there is no other way to achieve this ? what is the purpose of the form element and when should i be using it ?

Shayne Laufenberg
Shayne Laufenberg
4,213 Points
Shayne Laufenberg
Shayne Laufenberg
4,213 Points

@olu adesina This is entirely dependent on what you like to do in your program. Yes there are other ways to achieve this without defining a variable, instead of playerName you could use a form to post a request containing your data to itself and check when the $_POST value is set and not null using isset() in PHP, you could use GET variable and store the playerName inside a url. There are other ways of doing things we have many options to choose from its just a matter of when is the best time to use certain options.

To answer your second question a Form element is generally used to contain data that typically you'd like to post to another page however forms can also use GET as well. Lets say you create a login page for a user to sign into your website. You may want to use a form, to post the data they submit to a page, which then will communicate to the server and and return a result. These types of actions typically work with more dynamic websites that use databases to store users information as well as other data.

If you are wanting to practice by making a simple game I would suggest to use javascript it will help you get the grasp of the language itself and get you familar with open source projects that people typically post on a popular platform, github. Let me know have any specific questions about these topics as always i'll be lurking in the community section haha :)