I am currently developing a website where users can enter their Australian postcodes and it will compare that to a .csv file I created that will return their local member of Parliament. I am using flask for the back end.
I am stuck at the moment, I have done some research and tinkered with some JS code that supposedly handles querying the .csv and returning the values I want which is here. My JavaScript file is in a "static" folder while I am keeping my html templates in a suitably named "templates" folder.
d3.csv("data/Members.csv").then(function (data)) {
var members = data;
var button = d3.select("#button");
var form = d3.select("#form");
button.on("click", runEnter);
form.on("submit", runEnter);
}
function runEnter() {
d3.select("tbody").html("");
d3.event.preventDefault();
var inputValue = d3.select("#user-input").property("value");
var localMember = members.filter(members => members.Postcode.includes(inputValue));
d3.select("tbody").insert("tr").html (
"<td>" + (localMember["First Name" + "Surname"]) + "</a>" + "</td>" +
"<td>" + (localMember["Electorate"]) + "</a>" + "</td>"
);
console.log(1 + 1);
console.log(localMember["Electorate"]);
}
I believe it is being found by my .html file because I'm not getting any 404 errors, however the button does not return any console logs or execute the function. Here is the relevant code from my html file.
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
-----------------------------------------------------------------------------
<div class="item5">
<p class="pform">Postcode</p>
<form id="form">
<input type="text" id="user-input">
<input type="button" id="button" value="click here">
</form>
</div>
<div class="item6">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Electorate</th>
</tr>
</thead>
<tbody>
</div>
</div>
</body>
<script {{url_for('static', filename='app.js')}}></script>
</html>
Put code:
var button = d3.select("#button");
var form = d3.select("#form");
button.on("click", runEnter);
form.on("submit", runEnter);
out from d3.csv("data/Members.csv").then(function (data)) {...}