无法从html获取javascript用户输入

Question

我知道我应该使用document.getelemtbyID，但是由于某些原因，它对我没有用。我正在尝试构建一个简单的剪刀石头布游戏，其中有一个剪刀石头布类和一个index.js，我必须将用户名作为函数传递给我的班级，但我无法使其正常运行。这是我的Javascript代码-

const userName = document.getElementById(`username`).value;

然后我将其传递给班级-

let game=new RockPaperScissors(userName)
game.play(userName); (which is a function in the class)

这是我用于接收用户名的HTML-

  <div id="welcome-screen">
           <form id="name-form">
               <div class="form-group">
                   <label for="username">Your name</label>
                   <input type="text" id="username" class="form-control"
                          name="username" placeholder="Enter Name Here...">
                   <button type="button" id="start-game-button"
                           class="btn btn-primary">Start Game!</button>

               </div>
           </form>

我尝试了几种方法来登录javascript中的用户名，但无法正常工作，我尝试在控制台中对其进行登录，但仍然看不到结果。

Answer 1

这是答案

function getname() {
  var name = document.getElementById(`username`).value;
  alert(name);
}

  <div id="welcome-screen">
    <form id="name-form">
      <div class="form-group">
        <label for="username">Your name</label>
        <input type="text" id="username" class="form-control" name="username" placeholder="Enter Name Here...">
        <button type="button" onclick="getname()" id="start-game-button" class="btn btn-primary">Start Game!</button>
      </div>
    </form>

Answer 2

尝试将type=submit添加到按钮。

<button type="submit" id="start-game-button" class="btn btn-primary">Start Game!</button>