這個例子有多個產品（儀器），每個都有一個購買按鈕，當我點擊一個產品的購買按鈕時，它應該將從 html spinbox 提取的數量值發送到函式 myfunction。
問題：--我總是最終得到 myfunction 中第一個產品的值，變數使用'a'（因為所有產品都有相同的 id）
無論如何要單獨訪問每個 HTML 的旋轉框的值？
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.type " " post.instrument }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.name }} : {{post.brand}}</a></h2>
<div class="article-metadata">
{% if post.type not in "Guitar" or "bass" %}
<p class="article-content">{{"effects : " post.frets "\nColor : " post.color "\nportability : " post.bridge}}</p>
{% else %}
<p class="article-content">{{"Bridge : " post.bridge "\nColor : " post.color "\nFrets : " post.frets}}</p>
{% endif %}
</div>
<a class="mr-2" href="#">{{"Quantity"}} : {{post.quantity}}</a>
<form>
<input class="quant" name="quant" id="a" type="number" min="1" max={{post.quantity}} required>
<br>
<a>{{"Price:"}}</a>
<a class="mr-2" href="#">{{post.price "$"}}</a>
<button type="submit" class="purchase" onclick="myFunction({{post.quantity}},'{{post.brand}}', '{{post.name}}', '{{post.price}}')">Purchase</button>
</form>
</div>
</article>
{% endfor %}
<script>
function ajaxcall(quantity, brand, name){
$.ajax({
url : "{{ url_for('quantity_update') }}",
type: 'POST',
data: {new_quantity: JSON.stringify(quantity), brand: JSON.stringify(brand), name: JSON.stringify(name)}
});
}
function myFunction(quant, brand, name, price) {
var a = document.getElementById('a').value;
prix = parseInt(price) * a
let text = "Press a button!\n--OK to Purchase (Total price : " prix ")\n--Cancel to cancel.";
if (a) {
if(confirm(text)){
alert("Congrats, the product has been bought");
quantity = quant - a;
ajaxcall(quantity, brand, name);
}
} else {
alert("Please insert a value before buying")
}
document.getElementById("demo").innerHTML = text;
}
</script>
uj5u.com熱心網友回復：
訪問第一個數量的原因是因為具有多個相同的元素id是無效的 HTML - 通常瀏覽器將回傳檔案中與id提供給的值匹配的第一個元素document.getElementById。
一種解決方案是從數量輸入中洗掉id值，而是將輸入框定位為其父表單的子表單。按鈕（和其他表單元素）的父表單作為form嵌套表單元素的屬性提供。
此示例將form元素myFunction從單擊處理程式而不是quantity引數傳遞給函式，并為購買按鈕添加一個type="button"屬性以阻止它們默認生成提交事件。
"use strict";
function myFunction(form, name, brand, price) {
let quantity = form.querySelector(".quant");
console.log("quantity for purchase is " quantity.value);
}<form name="whatever">
<label>quantity: <input class="quant" value="1"></label>
<button type=button onclick='myFunction( this.form, "name", "brand", "price")'>Purchase</button>
</form>
<form name="whatever">
<label>quantity: <input class="quant" value="42"></label>
<button type=button onclick='myFunction( this.form, "name", "brand", "price")'>Purchase</button>
</form>請注意，不鼓勵在 HTML 中提供事件處理程式，Emiels 的出色回答顯示了一種重新撰寫代碼以在 JavaScript 中提供單擊事件偵聽器的方法。
uj5u.com熱心網友回復：
由于您已經在使用form標簽，我建議您在隱藏input元素中輸出所有值。這樣，您可以將每個值很好地存盤在其自己的標簽中，并在以后通過每個輸入的名稱檢索這些值。
<form class="article-form">
<input type="hidden" name="brand" value="{{post.brand}}" />
<input type="hidden" name="name" value="{{post.name}}" />
<input type="hidden" name="price" value="{{post.price}}" />
<input type="hidden" name="quantity" value="{{post.quantity}}" />
<input type="number" name="amount" class="quant" min="1" max="{{post.quantity}}" required>
<button type="submit" class="purchase">Purchase</button>
</form>
表單具有事件，每當您單擊標記submit內的提交按鈕時都會觸發該事件。form通過監聽這個事件并添加我們自己的處理邏輯，我們可以從輸入中提取所有值并斷言我們的邏輯。
借助FormData API，我們可以輕松提取表單中存在的所有值。這些值可以通過name相應輸入的屬性值來檢索。
const forms = document.querySelectorAll('.article-form');
for (const form of forms) {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = new FormData(form);
const amount = formData.get('amount');
if (amount === null || amount === '') {
alert("Please insert a value before buying");
return;
}
const brand = formData.get('brand');
const name = formData.get('name');
const quantity = formData.get('quantity');
const price = formData.get('price');
const total = parseInt(price) * amount;
const text = `Press a button!\n--OK to Purchase (Total price : ${total})\n--Cancel to cancel.`;
alert("Congrats, the product has been bought");
const newQuantity = quantity - amount;
ajaxCall(newQuantity, brand, name);
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/483702.html
標籤：javascript html 烧瓶 神社2
上一篇：如何檢測鍵盤輸入？