[英]Array index link to event listener loop
我正在尝试简化/重新考虑多种产品的价格计算。
代码演示: https : //jsfiddle.net/helloKittychan/jLfwgsz6/2/
结构:
价格:作为 [0] [1] 存储在数组中。
数量:每个产品的用户输入整数。
小计计算:在'blur'(用户输入)*(对应数组[n])上。
问题
第一个产品 Candy1 可以很好地计算小计,因为我对变量进行了硬编码。 然后我开始使用“blur”事件侦听器循环为 Candy1 和 Candy 2 的数量输入字段重新分解代码。事件侦听器在数量字段上工作正常,但现在我被困在如何调用相应的价格值上对于当前事件。 我想直接从数组调用或从 HTML 元素调用都是可能的,但我无法找出与当前事件相对应的正确价格的逻辑,或者不确定这是否可能。
以前的研究
我环顾了一些帖子和页面,但没有一个看起来足够简单,也不够相似,无法合成到我的代码中。
这的可见效果类似于(我认为)我想要的,但逻辑不是。 通过索引访问子数组并在索引增加时更新视图(SO post)
逻辑相似但 HTML 结构不同: Get value from select list in JS (SO post)
我查看了页面底部的 [Arrays and Loops] 部分,但我无法弄清楚如何使用它。 Javascript 数组(来自 Home and Learn 网站)
Stack Overflow 搜索关键字 js 数组选择索引
问题
我也怀疑我的 HTML 设计效率低下。 任何使我的小项目工作的建议将不胜感激。
代码演示: https : //jsfiddle.net/helloKittychan/jLfwgsz6/2/
仅JS:
// Inserting prod prices
var prodPrices = ["0.33", "0.50"];
document.getElementById("prod1").innerHTML = "£ " + prodPrices[0];
document.getElementById("prod2").innerHTML = "£ " + prodPrices[1];
// Setting up a universal Event Listener
document.addEventListener("DOMContentLoaded",
function() {
// grabbing (=var) the common Class name within the target block.
var qtyInput =
document.getElementsByClassName("qty-input");
// event listener = counting the number of grabbed Class occurrence (=array)
// and listening to a defined event (click/blur etc) on them + define event name.
for(var i = 0; i < qtyInput.length; ++i) {
qtyInput[i].addEventListener("blur", gotQty);
}
// Function to identify current element with event.
function gotQty(event) {
var qtyId = this.value;
var bow = qtyId * prodPrices[0];
console.log(qtyId);
console.log(bow);
}
});
// Calculating subtotal (qty * price) - currently only works for "Candy 1".
function subTot() {
var prod1Qty = document.getElementById("qtyFlat1").value; //this
var subTotProd1 = prod1Qty * prodPrices[0];
var subTotClean = subTotProd1.toFixed(2);
document.getElementById("prod1-subtotal").innerHTML = subTotClean;
// condescending health warning
if (prod1Qty > 10 ) {
document.getElementById("quantity-alert").innerHTML = "Too much sugar is bad for you.<br>Select between 1 ~ 10.";
return false;
}else{
return true;
}
}
subTot();
// Clearing invalid data & error message then resetting the sub tot - currently only works for "Candy 1".
function clearSub() {
var prod1QtyOver = document.getElementById("qtyFlat1").value;
if(prod1QtyOver > 10){
document.getElementById("quantity-alert").innerHTML = "<br><br>";
document.getElementById("qtyFlat1").value = "";
document.getElementById("prod1-subtotal").innerHTML = prodPrices[0];
}
}
clearSub();
如果我动态生成字段,我将使用data-
属性并将该属性设置为项目的值。 当用户点击该字段时,JS 可以访问它。
例如:在字段中,添加另一个属性data-price
分别设置为商品价格(这涉及一些 DOM 操作)。
...
<input class="qty-input" data-price="0.33" id="qtyFlat1" type="text" placeholder="1" class="qty" style="width: 30px;" maxlength="4" onblur="subTot()" onclick="clearSub()" onkeypress=""/>
...
<input class="qty-input" data-price="0.5" id="qtyFlat2" type="text" placeholder="1" class="qty" style="width: 30px;" maxlength="4" onblur="subTot()" onclick="clearSub()" onkeypress=""/>
...
在javascript中:
function gotQty(event) {
var qtyId = this.value;
var bow = qtyId * Number(event.srcElement.dataset.price);
console.log(qtyId);
console.log(bow);
}
请参阅http://jsfiddle.net/boo261cc/3并打开您的控制台。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.