Aktualisieren Sie Preise mit JS und JSON mit einem einfachen HTML-Formular

Question

Ich versuche ein Setup zu erstellen, bei dem Sie eine Postleitzahl eingeben, das Formular absenden und dann mithilfe von JavaScript prüfen, ob die ersten 4 Zeichen der Postleitzahl mit der Postleitzahl in einigen JSON-Daten übereinstimmen und ob dies der Fall ist , und ändern Sie dann den Preis auf der Seite. Dies wird für eine Shopify-Site gedacht sein, daher wäre jede Hilfe bei der Implementierung dort großartig.

Derzeit wird die Seite aktualisiert, wenn ich das Formular abschicke, aber es passiert nichts.

Hier ist, was ich bisher habe, noch im Anfangsstadium:

asynchrone Funktion checkZones() {
  // const requestURL = "{{ 'zones.json' | asset_url }}";
  // const request = new Request(requestURL);
  //const Antwort = Warten auf fetch(request);
  // const Zones = Warte auf Response.json();
  const Zonen = [{
      „name“: „Zone 1“,
      "Postleitzahlen": [
        „test1“,
        „test2“,
        „test3“,
        „test4“,
        „test5“,
        „test6“,
        „test7“,
        „test8“,
        „test9“,
        „test10“
      ],
      „Kosten“: 10,8
    },
    {
      „name“: „Zone 2“,
      "Postleitzahlen": [
        „test12“,
        „test13“,
        „test14“,
        „test15“,
        „test16“,
        „test17“,
        „test18“,
        „test19“,
        „test18“,
        „test19“,
        „test20“
      ],
      „Kosten“: 16,8
    }
  ]
  console.log(zonen);
  updatePrice()
}

Funktion 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">Kosten aktualisieren</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>