-2

I am creating a game in a web browser using html, css, and javascript. I ask the user how many opponents he/she wants using radio inputs and a button to submit. I don't have anywhere to store the data with the form action. I just want it to be accessible to my javascript. Is it possible to either not use form or not store the input in a database anywhere? Here is the html:

<form id="database">
        <label for="players1">
            <input id="players1" type="radio" value=1 name="playerAmount">1
        </label>
        <label for="players2">
            <input id="players2" type="radio" value=2 name="playerAmount">2
        </label>
        <label for="players3">
            <input id="players3" type="radio" value=3 name="playerAmount">3
        </label>
        <label for="players4">
            <input id="players4" type="radio" value=4 name="playerAmount">4
        </label>
        <label for="players5">
            <input id="players5" type="radio" value=5 name="playerAmount">5
        </label>
        <button type="submit">Done</button>
    </form>

and here is what I was trying to do to get the response but it is not working (javascript)

var players; players = document.getElementById("database").playerAmount; document.write(players);

The console says: Uncaught TypeError: Cannot read property 'playerAmount' of null at poker.js:2 but playerAmount is updated in the URL to the amount inputted

Waffles
  • 1

2 Answers2

0

Use querySelector to get the value of checked radio button directly.

document.querySelector('button#submit').addEventListener('click', function() {
  var players = document.querySelector('input[name="playerAmount"]:checked').value;
  document.write(players);
});
<form id="database">
  <label for="players1">
      <input id="players1" type="radio" value=1 name="playerAmount">1
  </label>
  <label for="players2">
      <input id="players2" type="radio" value=2 name="playerAmount">2
  </label>
  <label for="players3">
      <input id="players3" type="radio" value=3 name="playerAmount">3
  </label>
  <label for="players4">
      <input id="players4" type="radio" value=4 name="playerAmount">4
  </label>
  <label for="players5">
      <input id="players5" type="radio" value=5 name="playerAmount">5
  </label>
  <button type="submit" id="submit">Done</button>
</form>
Chaska
  • 3,165
  • 1
  • 11
  • 17
0

Take value from "playerAmount" of form element , you are almost done.

document.getElementById('done').addEventListener('click', function(e) {
  e.preventDefault();
  var players;
  players = document.getElementById("database").playerAmount.value;
  console.log(players);
})
<form id="database">
  <label for="players1">
      <input id="players1" type="radio" value=1 name="playerAmount">1
    </label>
  <label for="players2">
      <input id="players2" type="radio" value=2 name="playerAmount">2
    </label>
  <label for="players3">
      <input id="players3" type="radio" value=3 name="playerAmount">3
    </label>
  <label for="players4">
      <input id="players4" type="radio" value=4 name="playerAmount">4
    </label>
  <label for="players5">
      <input id="players5" type="radio" value=5 name="playerAmount">5
    </label>
  <button type="submit" id="done">Done</button>
</form>
donkey
  • 303
  • 4
  • 11