title: Get values from html form to JavaScript objects
body: <p>I am having problems with passing values from HTML to JavaScript. This is a little RPG game I'm building and I want the user to type its name, age, class, and race in a form and create a Character object with his information.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Character {
    constructor(name, age, role, race) {
      this.name = document.getElementById("nameCharacter").value;
      this.age = document.getElementById("ageCharacter").value;
      this.role = document.getElementById("classCharacter").value;
      this.race = document.getElementById("raceCharacter").value;
    }
  }
  var hero;
  function create() {
    hero = new Character();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  .form-group{
      margin-left:350px;
      margin-right:350px;
      margin-top: 25px;
  }
  
  .form-check{
      margin-left:350px;
  }
  
  #boton{
      margin-left:350px;
      margin-top:15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;title&gt;Iniciando&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;link
        rel="stylesheet"
        type="text/css"
        media="screen"
        href="criarPersonagem.css"/&gt;
      &lt;link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"/&gt;
      &lt;script src="criarPersonagem.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav class="navbar navbar-expand-sm bg-dark navbar-dark"&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="mg.jpg" alt="Logo" style="width:40px;" /&gt;
        &lt;/a&gt;
        &lt;!-- Links --&gt;
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="rascunho.html"&gt;Battle RPG&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link 3&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;h1 style="text-align: center;"&gt;Welcome to the game!&lt;/h1&gt;
      &lt;h3 style="text-align: center;"&gt;Create your own Character&lt;/h3&gt;
      &lt;form action="" name="criarPP"&gt;
        &lt;div class="form-group"&gt;
          &lt;input
            type="text"
            class="form-control"
            id="nameCharacter"
            placeholder="Your character's name"
          /&gt;
          &lt;small id="nomePP" class="form-text text-muted"
            &gt;This will be your nickname inside the game&lt;/small
          &gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;input
            type="number"
            class="form-control"
            id="ageCharacter"
            placeholder="Your character's age"
          /&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;select class="form-control" id="classCharacter"&gt;
            &lt;option value="Null" hidden&gt;Your character's class&lt;/option&gt;
            &lt;option value="Mage"&gt;Mage&lt;/option&gt;
            &lt;option value="Assassin"&gt;Assassin&lt;/option&gt;
            &lt;option value="Warrior"&gt;Warrior&lt;/option&gt;
            &lt;option value="Paladin"&gt;Paladin&lt;/option&gt;
            &lt;option value="Necromancer"&gt;Necromancer&lt;/option&gt;
            &lt;option value="Druid"&gt;Druid&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;select class="form-control" id="raceCharacter"&gt;
            &lt;option value="Null" hidden&gt;Your character's race&lt;/option&gt;
            &lt;option value="Human"&gt;Human&lt;/option&gt;
            &lt;option value="Elf"&gt;Elf&lt;/option&gt;
            &lt;option value="Orc"&gt;Orc&lt;/option&gt;
            &lt;option value="Dwarf"&gt;Dwarf&lt;/option&gt;
            &lt;option value="Argonian"&gt;Argonian&lt;/option&gt;
            &lt;option value="Darl elf"&gt;Dark elf&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;button
          type="submit"
          class="btn btn-primary"
          id="boton"
          onclick="create()"
        &gt;
          Create
        &lt;/button&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried somethings and after several tries and failures. I started to think there is something missing in the form tag or even in the button tag</p>
  
  <p>The expected results are simple: successfully create the object via the form. I usually try to show it on a console to see if it works.</p>