Kemas kini harga menggunakan JS dan JSON dengan borang HTML yang mudah

Question

Saya cuba membuat persediaan di mana anda memasukkan kod zip, menyerahkan borang, dan kemudian menggunakan JavaScript untuk menyemak sama ada 4 aksara pertama kod zip sepadan dengan kod zip dalam beberapa data JSON dan jika ya , kemudian tukar harga pada halaman. Ini adalah untuk tapak Shopify, jadi sebarang bantuan tentang cara melaksanakannya di sana adalah bagus.

Pada masa ini apabila saya menyerahkan borang, halaman dimuat semula tetapi tiada apa yang berlaku.

Inilah yang saya ada setakat ini, masih di peringkat awal:

async function checkZones() {
  // const requestURL = "{{ 'zones.json' | asset_url }}";
  // const request = new Request(requestURL);
  //const response = tunggu ambil(permintaan);
  // const zones = menunggu respons.json();
  zon const = [{
      "nama": "zon 1",
      "poskod": [
        "ujian1",
        "ujian2",
        "ujian3",
        "ujian4",
        "ujian5",
        "ujian6",
        "ujian7",
        "ujian8",
        "ujian9",
        "ujian10"
      ],
      "kos": 10.8
    },
    {
      "nama": "zon 2",
      "poskod": [
        "ujian12",
        "ujian13",
        "ujian14",
        "ujian15",
        "ujian16",
        "ujian17",
        "ujian18",
        "ujian19",
        "ujian18",
        "ujian19",
        "ujian20"
      ],
      "kos": 16.8
    }
  ]
  console.log(zon);
  updatePrice()
}

fungsi kemas kiniHarga(zon) {
  const postcodeFormInput = document.querySelector('#postcodeForm input[type="text]"');

  poskod const = zon.poskod;
  untuk (kod const poskod) {
    if (postcodeFormInput.value.contains(code)) {
      const productPrice = document.querySelector('#ProductPrice-product-template').textContent;
      jika (kod === "ujian1") {
        const newPrice = produkHarga + zon.kos;
        document.querySelector('#ProductPrice-product-template').innerHTML = newPrice;
      }
    }
  }
}

<form onsubmit="checkZones()" id="postcodeForm">
  <jenis input="teks">
  <button type="submit">Kemas kini Kos</button>
</form><span id="ProductPrice-product-template">0.00</span>

Answer 1

Beberapa soalan di sini

Beberapa soalan ini:

1. Gunakan pengendali acara hantar dan halang penyerahan
2. Anda tidak melepasi kawasan ke fungsi yang memerlukannya
3. Anda perlu memastikan jumlah yang digunakan dalam pengiraan adalah nombor dan bukan rentetan (rentetan diambil daripada innerText dan .value) - Saya menggunakan tanda tambah dolar +将其转换为数字或0（如果未定义），并使用条件链接运算符?. untuk mengendalikan poskod yang hilang
4. Anda boleh menggunakan find untuk mendapatkan kawasan yang mengandungi pelbagai kod pos

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>