Question

我正在尝试将用户输入的“数量”乘以从下拉列表中选择的1个项目（项目的价格必须保存在数组中）。此外，当用户选择不同的项目时，右侧的图片会发生变化。我在制作数量*项目时遇到问题，因为我是JavaScript / HTML的初学者。请不要使用jQuery代码，纯粹是JavaScript / HTML。下面是一段代码。有人可以帮我解决吗？感谢。

JavaScript的：

function swapImage(dropdown){
    var value= dropdown.options[dropdown.selectedIndex].value;
    var edit_save = document.getElementById("imageToSwap");
    edit_save.src = value;
    alert(value);
}

var priceList = new Array(4);
pricelist[0]=10;
pricelist[1]=12;
pricelist[2]=14;
pricelist[3]=11;    

function calculateTotal(dropdown){
    var total=priceList[dropdown.selectedIndex]*number;
}

HTML：

<img id="imageToSwap" src="gnar.png" alt="CSS Style Tag">

<br><br>

<select id="dlist" onchange="swapImage(this)">
    <option value=gnar.png>Gnar Hoodie €10</option>
    <option value=blitz.png>Blitz T-Shirt €12</option>
    <option value=corki.png>Corki Hoodie €14</option>
    <option value=graves.png>Graves T-Shirt €11</option>
</select>

<br><br>

<label name="Quantity">Quantity of the item</label> 
<input type="number" name="Quantity" min="1" required=""><br>

<p class="totals" id="totalprice">Total Price:</p>

Answer 1

我做了http://jsfiddle.net/p5rmpjet/7/。我稍微改了一下，所以价格会存储在你的html中的ids中，而不是每次有新项目时都将它们添加到你的JS中。

function swapImage(e){
   var image = document.getElementById("imageToSwap");
   console.log(image);  //image tag
   image.src = e.value;
}

function updatePrice(quantity){
   var edit_save = document.getElementById("dlist");
   console.log(edit_save.options[ edit_save.selectedIndex].id); //price of item

   var quantity = document.getElementById("quantity").value;
   console.log(quantity);

   var price = edit_save.options[edit_save.selectedIndex].id;

   var total = quantity * price;
   console.log(total);
   document.getElementById("totalprice").innerHTML = total;
 }

 function updateItem(price){
    var price = edit_save.options[edit_save.selectedIndex].id;
 }

注意：更新小提琴，在onchange事件上使用第二个函数来选择项目http://jsfiddle.net/p5rmpjet/7/

使用javascript计算html内部

1 个答案: