Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 6</title>
 <style type="text/css">
    #getResults li{
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }
    li{
        list-style-type: none;
    }
</style>
</head>
<body>

<button id="getList">Get Data</button>
<div id="race-names"></div>
<div>
<ul id='getResults'></ul>
</div>
<div>
<ul id='showResults'></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>

</body>
</html>

var raceContainer = document.getElementById("getResults");
var btn = document.getElementById("getList");

btn.addEventListener("click", function(){

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://itweb.fvtc.edu/wetzel/marathon/races/');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
};
ourRequest.send();

});

function renderHTML(data) {
var htmlString = "";

for (i = 0; i < data.length; i++){
    htmlString += "<p>" + data[i].race_name + ".</p>";

}

raceContainer.insertAdjacentHTML('beforeend', htmlString);

}