無法從 html 按鈕呼叫 JavaScript function

Question

我目前正在開發一個網站，用戶可以在其中輸入他們的澳大利亞郵政編碼，並將其與我創建的 .csv 文件進行比較，該文件將返回他們當地的國會議員。 我在后端使用 flask。

我現在被困住了，我做了一些研究並修改了一些 JS 代碼，這些代碼應該處理查詢 .csv 並返回我想要的值，它在這里。 我的 JavaScript 文件位於“靜態”文件夾中，而我將 html 模板保存在適當命名的“模板”文件夾中。

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"]);
}

我相信它是由我的 .html 文件找到的，因為我沒有收到任何 404 錯誤，但是該按鈕不會返回任何控制台日志或執行 function。這是我的 html 文件中的相關代碼。

<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>

Answer 1

放代碼：

  var button = d3.select("#button");
  var form = d3.select("#form");
  button.on("click", runEnter);
  form.on("submit", runEnter);

來自 d3.csv("data/Members.csv").then(function (data)) {...}

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

無法從 html 按鈕呼叫 JavaScript function

問題描述

1 個解決方案

解決方案1
1 2022-02-27 13:34:36

無法從 html 按鈕呼叫 JavaScript function

問題描述

1 個解決方案

解決方案1 1 2022-02-27 13:34:36

解決方案1
1 2022-02-27 13:34:36