Trouble calling JavaScript function from html button

Question

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>

Add an opening <html> tag at the top, add an opening <body> tag right after </head> tag. Delete the redundant last </div> tag. Hassle like that is easily being avoided by formatting your code some. — bitski
– bitski, Commented Feb 27, 2022 at 13:46
I’ve got all that I just didn’t include it because the rest of the code isn’t relevant. — Kye
– Kye, Commented Feb 27, 2022 at 20:39

Artee · Accepted Answer · 2022-02-28 03:48:21Z

1

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)) {...}

https://jsfiddle.net/artee2025/auw6zrdp/2/

edited Feb 28, 2022 at 3:48

answered Feb 27, 2022 at 13:34

Artee

8449 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kye Over a year ago

I've changed it to follow what you said and have the variables for the buttons and the events outside of the d3 function. Unfortunately it still doesn't seem to be working.

Artee Over a year ago

Can you demonstrate this in jsfiddle?

Artee Over a year ago

Look I made an example - jsfiddle.net/artee2025/auw6zrdp/2

Collectives™ on Stack Overflow

Trouble calling JavaScript function from html button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related