JavaScript-动态添加一个从输入到GET URL的值

Question

我有3个简单的输入提交的

我需要做 input input get 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>

我的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

更改submit()，因此将ID作为参数。

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>

Answer 2

<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();
}