trying to add form input to url for GET request

Question

How do i go about adding an object onto the end of my url address , at the moment $year is not added to the GET request.

    <input type = "text" id="year">
            <input type = "submit" id="btn">
    
    <script >
    
    document.getElementById("btn").addEventListener("click", function() {
           
            var $year = document.getElementById("year");
            request = new XMLHttpRequest();
            request.open("GET", "https://mudfoot.doc.stu.mmu.ac.uk/node/api/halloffame?year="+$year, true);
            request.send(null);
    
            
        }
        return val;
      }

Answer 1

use value() after getElementById to get value of that selected element

<input type="text" id="year">
<input type="submit" id="btn">

<script>
    document.getElementById("btn").addEventListener("click", function () {
        var $year = document.getElementById("year").value;
        request = new XMLHttpRequest();
        const reqUrl = "https://mudfoot.doc.stu.mmu.ac.uk/node/api/halloffame?year=" + $year
        console.log("reqUrl: ", reqUrl);  
        request.open("GET", reqUrl, true);
        request.send(null);
    })
</script>