XMLHttpRequest неопределен при открытии

Question

Я пытаюсь распечатать все праздничные дни в диапазоне дат и регионе, которые заполняются в форме при нажатии кнопки отправки.

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

HTML

    <div id="root"></div>
    <script language="JavaScript" type="text/javascript" src="script.js"></script>

    Start Date: <input type="text" name="fromDate" id="fromDate" value="04-07-2019"><br>
    End Date: <input type="text" name="toDate" id="toDate" value="04-07-2020"><br>
    Class Country: <input type="text" name="country" id="country" value="usa"><br>
    Region: <input type="text" name="region" id="region" value="dc"><br>
    <input type="button" onclick="submit()" value="Submit">

* Javascript 1011 *

    function submit(){
        var fromDate = document.getElementById("fromDate").name + "=" + document.getElementById("fromDate").value + "&";
        var toDate = document.getElementById("toDate").name + "=" + document.getElementById("toDate").value + "&";
        var country = document.getElementById("country").name + "=" + document.getElementById("country").value + "&";
        var region = document.getElementById("region").name + "=" + document.getElementById("region").value + "&";

        fullURL = "https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange&" + fromDate + toDate + country + region + "holidayType=public_holiday";
        requestUrl()
    }

    function requestUrl(){
        var request = new XMLHttpRequest()

        request.open('GET', fullURL, true)

        request.onload = function () {
            console.log(this.response)
            var data = JSON.parse(this.response)
            data.forEach(holiday => {
                var date = String(holiday.date["day"] + "/" + holiday.date["month"] + "/" + holiday.date["year"])
                document.write(date)

            })
            display()
        }
    }

    function display(){
        request.send()
    }

Я получаю эту ошибку:

Uncaught SyntaxError: Unexpected token u in JSON at position 0" at JSON.parse, requestURL, submit and HTMLInputElement.onclick.

Answer 1

        const btn = document.querySelector('.btn')
        btn.addEventListener("click",submit)
        function submit(){
            var fromDate = document.getElementById("fromDate").name + "=" + document.getElementById("fromDate").value + "&";
            var toDate = document.getElementById("toDate").name + "=" + document.getElementById("toDate").value + "&";
            var country = document.getElementById("country").name + "=" + document.getElementById("country").value + "&";
            var region = document.getElementById("region").name + "=" + document.getElementById("region").value + "&";

            fullURL = "https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange&" + fromDate + toDate + country + region + "holidayType=public_holiday";
            requestUrl()
        }

        function requestUrl(){
            // 1. Create a new XMLHttpRequest object
            let request = new XMLHttpRequest();

            // 2. Configure it: GET-request for the URL /article/.../load
            request.open('GET', fullURL);

            // 3. Send the request over the network
            request.send();

            // 4. This will be called after the response is received
            request.onload = function() {
                if (request.status != 200) { // analyze HTTP status of the response
                    alert(`Error ${request.status}: ${request.statusText}`); // e.g. 404: Not Found

                } else { // show the result
                    var data = JSON.parse(this.response);
                    data.forEach(holiday => {
                        var date = String(holiday.date["day"] + "/" + holiday.date["month"] + "/" + holiday.date["year"])
                        document.write(date)

                    })
                }
            };
        }

    <div id="root"></div>


    <div>
        Start Date: <input type="text" name="fromDate" id="fromDate" value="04-07-2019"/><br>
        End Date: <input type="text" name="toDate" id="toDate" value="04-07-2020"/><br>
        Class Country: <input type="text" name="country" id="country" value="usa"/><br>
        Region: <input type="text" name="region" id="region" value="dc"/><br>
        <input type="submit" value="Submit" class="btn"/>
    </div>