не удалось получить ввод пользователя в javascript из html

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

Вот ответ

О приведенном выше коде: в ядре javascript нет предопределенного метода события щелчка, поэтому я создал одну функцию в javascript и просто вызвал ее событие onclick кнопки.

ваш код только что получил значение текстового поля, но не было инициировано событие, чтобы получить значение текстового поля.

var name = "";
function getname() {
  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>