Kemas kini harga menggunakan JS dan JSON dengan borang HTML yang mudah
P粉294954447
2023-08-18 12:38:26
<p>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. </p>
<p>Pada masa ini apabila saya menyerahkan borang, halaman dimuat semula tetapi tiada apa yang berlaku. </p>
<p>Inilah yang saya ada setakat ini, masih di peringkat awal: </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">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;
}
}
}
}</pre>
<pre class="brush:html;toolbar:false;"><form onsubmit="checkZones()" id="postcodeForm">
<jenis input="teks">
<button type="submit">Kemas kini Kos</button>
</form><span id="ProductPrice-product-template">0.00</span></pre>
<p><br /></p>
Beberapa soalan di sini
Beberapa soalan ini:
+
将其转换为数字或0(如果未定义),并使用条件链接运算符?.
untuk mengendalikan poskod yang hilang