如何将数据从 HTML 文件发送到 .Js 然后解决并返回 HTML 中的结果

Question

首先是 HTML 文件

<form name=requirements action = "test2.js" method="GET">
   <table border="3px">
      <tr>
         <td></td>
         <td><b>Price List</b></td>
         <td></td>
      </tr>
      <tr>
         <td>Items</td>
         <td>Quantity</td>
         <td>Price</td>
         <td>Requirement</td>
      </tr>
      <tr>
         <td>1 Bottle</td>
         <td>1 item</td>
         <td>4.10 Euros</td>
         <td><input type="number" name="bottle" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 Pack</td>
         <td>11 bottles</td>
         <td>40 Euros</td>
         <td><input type="number" name="pack" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 Box</td>
         <td>24 packs</td>
         <td>950 Euros</td>
         <td><input type="number" name="box" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 chocolate bar</td>
         <td>1 bar</td>
         <td>3 Euros</td>
         <td><input type="number" name="bar" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 chocolate pack</td>
         <td>5 bars</td>
         <td>14 Euros</td>
         <td><input type="number" name="back" maxlength="20"></td>
      </tr>
      <tr>
         <td><input type="submit" value="submit"></td>
      </tr>
   </table>
</form>

下面是名为 test2.js 的 .js 文件

let bottle = document.getElementById("bottle").value;
let pack = document.getElementById("pack").value;
let packf = pack * 11;
let box = document.getElementById("box").value;
let boxf = box * 264;
let total = boxf + packf + bottle;
let required = total;
console.log(required);

如何将 HTML 文件中的 form 数据发送到 test2.js 并返回结果并在 HTML 页面中打印？

Answer 1

你可以通过监听form-submit-event在客户端完成计算。这是基于您的代码的示例：

// Hint: the HTML-elements need to have an id for this method to work
const form = document.getElementById("form");
const result = document.getElementById("result");
// also it's better to cache DOM-selections in order to not repeat that work
const bottle = document.getElementById("bottle");
const pack = document.getElementById("pack");
const box = document.getElementById("box");

form.addEventListener("submit", (event) => {
  const packf = pack.value * 11;
  const boxf = box.value * 264;
  // value attributes of HTML-elements are always strings,
  // so we need to parse them.
  // multiplying does that automatically, unlike addition
  const total = boxf + packf + Number(bottle.value);
  // display the result below the table
  result.textContent = total;
  // prevent the browser default behavior which would reload the page
  event.preventDefault();  
});

<form name=requirements action="test2.js" method="GET" id="form">
  <table border="3px">
      <tr>
          <td></td>
          <td><b>Price List</b></td>
          <td></td>
      </tr>
      <tr>
          <td>Items</td>
          <td>Quantity</td>
          <td>Price</td>
          <td>Requirement</td>
      </tr>
      <tr>
          <td>1 Bottle</td>
          <td>1 item</td>
          <td>4.10 Euros</td>
          <td><input type="number" id="bottle" name="bottle" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 Pack</td>
          <td>11 bottles</td>
          <td>40 Euros</td>
          <td><input type="number" id="pack" name="pack" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 Box</td>
          <td>24 packs</td>
          <td>950 Euros</td>
          <td><input type="number" name="box" id="box" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 chocolate bar</td>
          <td>1 bar</td>
          <td>3 Euros</td>
          <td><input type="number" name="bar" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 chocolate pack</td>
          <td>5 bars</td>
          <td>14 Euros</td>
          <td><input type="number" name="back" maxlength="20"></td>
      </tr>
      <tr>
          <td><input type="submit" value="submit"></td>
      </tr>
  </table>
</form>
<div id="result"></div>