使用JS和JSON以及簡單的HTML表單來更新價格

Question

我正在嘗試創建一個設置，在這個設置中，您可以輸入郵政編碼，提交表單，然後使用JavaScript檢查郵政編碼的前4個字符是否與某些JSON數據中的郵政編碼匹配，如果匹配，則更改頁面上的價格。這將用於Shopify網站，因此如果有關如何在其中實施它的任何幫助，將會很好。

目前，當我提交表單時，頁面會刷新，但沒有任何反應。

以下是我目前所擁有的，還處於早期階段：

async function checkZones() {
  // const requestURL = "{{ 'zones.json' | asset_url }}";
  // const request = new Request(requestURL);
  //const response = await fetch(request);
  // const zones = await response.json();
  const zones = [{
      "name": "zone 1",
      "postcodes": [
        "test1",
        "test2",
        "test3",
        "test4",
        "test5",
        "test6",
        "test7",
        "test8",
        "test9",
        "test10"
      ],
      "cost": 10.8
    },
    {
      "name": "zone 2",
      "postcodes": [
        "test12",
        "test13",
        "test14",
        "test15",
        "test16",
        "test17",
        "test18",
        "test19",
        "test18",
        "test19",
        "test20"
      ],
      "cost": 16.8
    }
  ]
  console.log(zones);
  updatePrice()
}

function updatePrice(zone) {
  const postcodeFormInput = document.querySelector('#postcodeForm input[type="text]"');

  const postcodes = zone.postcodes;
  for (const code of postcodes) {
    if (postcodeFormInput.value.contains(code)) {
      const productPrice = document.querySelector('#ProductPrice-product-template').textContent;
      if (code === "test1") {
        const newPrice = productPrice zone.cost;
        document.querySelector('#ProductPrice-product-template').innerHTML = newPrice;
      }
    }
  }
}

<form onsubmit="checkZones()" id="postcodeForm">
  <input type="text">
  <button type="submit">Update Costs</button>
</form><span id="ProductPrice-product-template">0.00</span>

Answer 1

這裡有一些問題

其中一些問題：

1. 使用submit事件處理程序並阻止提交
2. 您沒有將區域傳遞給需要它們的函數
3. 您需要確保在計算中使用的金額是數字而不是字串（從innerText和.value獲取的字串）-我使用一元加號 將其轉換為數字或0（如果未定義），並使用條件連結運算子?.來處理缺少的郵遞區號
4. 您可以使用find來取得包含郵遞區號的陣列的區域

const checkZones = () => {
  // 这里是一个更简单的fetch
  //fetch("{{ 'zones.json' | asset_url }}")
  // .then(response => response.json())
  // .then(zones => updatePrice(zones));
  updatePrice(zones)
}
const postcodeFormInput = document.querySelector("#postcodeForm input[type=text]");
const productTemplate = document.getElementById('ProductPrice-product-template');
const updatePrice = (zones) => {

  const postCode = postcodeFormInput.value;
  console.log("Input",postCode)
  const cost = +zones.find(({postcodes}) => postcodes.includes(postCode))?.cost; // 如果未找到则为0
  
  if (!cost) return; // 未找到
  const productPrice = +productTemplate.textContent;
  const newPrice = productPrice + cost;
  productTemplate.innerHTML = newPrice;
};

document.getElementById("postcodeForm").addEventListener("submit", (e) => {
  e.preventDefault(); // 停止提交
  checkZones()
})

<form id="postcodeForm">
  <input type="text">
  <button type="submit">更新成本</button>
</form>
<span id="ProductPrice-product-template">0.00</span>







<script>
// 测试数据，在取消注释fetch时将其删除
const zones = [{ "name": "zone 1", "postcodes": [ "test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9", "test10" ], "cost": 10.8 }, { "name": "zone 2", "postcodes": [ "test12", "test13", "test14", "test15", "test16", "test17", "test18", "test19", "test18", "test19", "test20" ], "cost": 16.8 } ];
</script>