Javascript - динамически добавлять значение из ввода в URL-адрес GET

Question

У меня есть 3 простых входных поля

Мне нужно динамически добавить значение ввода к запросу GET , мне нужно использовать только Ваниль JS для этого.

Мой HTML

<div class="action-container">
    <div class="action">
        <input class="input" id="player1" type="text">
        <div class="button" onclick="submit()">Submit</div>        
    </div>
    <div class="action">
        <input class="input" id="player2" type="text">
        <div class="button" onclick="submit()">Submit</div>
    </div>
    <div class="action">
        <input class="input" id="player3" type="text">
        <div class="button" onclick="submit()">Submit</div>
    </div>
</div>

My JS

function submit(){
    var http = new XMLHttpRequest();

    var guessPlayer1 = document.getElementById('player1').value
    var guessPlayer2 = document.getElementById('player2').value
    var guessPlayer3 = document.getElementById('player3').value

    http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
            console.log(http.response)
        }
    }

    http.open("GET", "https://Dummy-End-Point.com/" + guessPlayer1, true);
    http.send();

}

Answer 1

<div class="action-container">
    <div class="action">
        <input class="input" id="player1" type="text">
        <div class="button" onclick="submit(this)">Submit</div>        
    </div>
    <div class="action">
        <input class="input" id="player2" type="text">
        <div class="button" onclick="submit(this)">Submit</div>
    </div>
    <div class="action">
        <input class="input" id="player3" type="text">
        <div class="button" onclick="submit(this)">Submit</div>
    </div>
</div>

function submit(elem) {
  var http = new XMLHttpRequest();

  var guess = elem.parentElement.getElementsByTagName("input")[0].id; 

  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      console.log(http.response)
    }
  }

  http.open("GET", "https://Dummy-End-Point.com/" + guess, true);
  http.send();

}

Answer 2

Измените submit(), чтобы в качестве параметра использовался идентификатор.

function submit(id) {
  var http = new XMLHttpRequest();

  var guess = document.getElementById(id).value

  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      console.log(http.response)
    }
  }

  http.open("GET", "https://Dummy-End-Point.com/" + guess, true);
  http.send();

}

<div class="action-container">
  <div class="action">
    <input class="input" id="player1" type="text">
    <div class="button" onclick="submit('player1')">Submit</div>
  </div>
  <div class="action">
    <input class="input" id="player2" type="text">
    <div class="button" onclick="submit('player2')">Submit</div>
  </div>
  <div class="action">
    <input class="input" id="player3" type="text">
    <div class="button" onclick="submit('player3')">Submit</div>
  </div>
</div>