Q: I want to search data from a csv file, but its not working This HTML is meant to link an input to a .csv file. So for example, lets say I enter in the value '1' for the gameID, all the relevant information about that game should pop up, but it doesn't. Heres my code, I'm clueless as to what may be wrong, any help would be greatly appreciated. Also heres a link to an image of the csv file, incase the csv file is the culprit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Games Library Reservations Page</title>
<link href="styles.css" rel="stylesheet" type="text/css">

<body background="white">
<div id='main'>

    <div id='titleImage'><img title='Home' src='GLLogo2.png' width='700' height='190' alt='Games Lending Library' /></div>
    <div id='menu-wrapper'>
        <div id='menu'>
            <ul>
                <li><a href='test.html'>Home</a></li>
                <li class='current_page_item'><a href='#'>Reservations</a></li>
            </ul>
        </div>
    </div>

    <div>
        <h1>Reservations</h1>
    </div>

    <form name="theForm" onsubmit="return validation();">
    Your name:<br>
    <input type="text" name="theName" required>
    <br>

    Game ID:<br>
    <input type="number" id="gameId" onchange="getGameName()" min="1" required>
    <input type="text" id="gameName" readonly>
    <br>

    Reservation Start Date:<br>
    <input type="date" name="startDate" required><div id="dateWarn"></div>
    <br>

    Days Reserved:<br>
    <input type="number" name="days" id="days" onchange="calculate()" min="1" max="5" required>
    <br>

    Total Cost:<br>
    <input type="text" id="totalCost" readonly>
    <br><br>

    <input type="submit" value="submit">
    </form>

    <script type="text/javascript"
    function calculate() {
    var theDays = document.getElementById('days').value;
    var theGameId = document.getElementById('gameId').value;
    var valueField=document.getElementById('totalCost');
    var totalValue;
    var gamePrice=document.getElementById("dataTable").rows[theGameId].cells[8].innerHTML;
    totalValue=theDays*gamePrice;
    valueField.value="£"+totalValue.toFixed(2);
}
</script>

<script type="text/javascript"
fucntion validation() {
    var theGameId = document.getElementById('gameId').value;
    var rentalDays=document.getElementById("dataTable").rows[theGameId].cells[8].innerHTML;
    var theDays = document.getElementById('days').value;
    if(theDays>rentalDays){
        alert ("Failed to submit form. The number of days entered exceeds the maximum amount of days available to reserved the choosen game");
        return false;
    }else{
        alert("Form submitted succesfully!");
        return true;
    }
}
</script>

<script src="http://mbostock.github.com/d3/d3.min.js"</script>

        <script type="text/javasctipt"charset="utf-8">
            d3.text("games.csv", fucntion(data) {
                var parsedCSV = d3.csv.parseRows(data);

                var conatiner = d3.select("body")
                    .append("table")
                    .attr("id","dataTable")
                    .attr("style","display:none")

                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")

                    .selectAll("td")
                        .data(fucntion(d) { return d; }).enter()
                        .append("td")
                        .text(function(d) { return d; });
            });
        </script>

<script type="text/javascript">
fucntion getGameName() {
        var theGameName=document.getElementById("gameName");
        var theID = document.getElementById("gameId").value;
        var maxVal=document.getElementById("dataTable").rows.length-1;
        if(theId>maxVal) {
            theGameName.value="ID not valid";
            theGameName.style.backgroundColor="red"
            theGameName.style.color="white"
        }else{
            var tableValue=document.getElementById("dataTable").rows[theID].cells[8].innerHTML;
            theGameName.value=tableValue;
            theGameName.style.backgroundColor="#7CFC00"
            theGameName.style.color="black"
        }
        calculate();
}
</script>
</div>
</body>
<html>

