根据数量或项目的变化计算价格的动态文本框

Question

我是 javascript 新手，热衷于学习。

我目前有一个表格，允许用户选择他们的食物，输入他们的数量并计算价格。

每当我更改所选食品时，我的函数都能够动态计算价格。但是，如果我选择重新输入另一个数量，价格将不会动态更新。我正在尝试这样做，以便每当我更改食物下拉菜单或数量值时价格都会动态更新。感谢任何帮助。

谢谢。

附上我的代码。

        function getSelectValue() {
            var selectedValue1 = document.getElementById("dropdownList").value;
            if (selectedValue1 === 'Carbonara') {
                var currentPrice1 = 4.50 * parseFloat(amount_1.value);
                document.getElementById("price_1").value = "$" + currentPrice1;
            } else {
                var currentPrice1 = 3.50 * parseFloat(amount_1.value);
                document.getElementById("price_1").value = "$" + currentPrice1;
            }
            
            var selectedValue2 = document.getElementById("dropdownList2").value;
            if (selectedValue2 === 'Carbonara') {
                document.getElementById("price_2").value = "4.50";
                var currentPrice2 = 4.50 * parseFloat(amount_2.value);
                document.getElementById("price_2").value = "$" + currentPrice1;
            } else {
                var currentPrice2 = 3.50 * parseFloat(amount_2.value);
                document.getElementById("price_2").value = "3.50";
            }
        }

        Select Food:
        <select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
            <option value="Prawn Aglio Olio">Prawn Aglio Olio</option>
            <option value="Carbonara">Carbonara</option>
        </select>
        <br>
    
        Select Quantity:
        <input type="text" id="amount_1">
        <br>
    
        Price per unit:
        <input type="text" id="price_1" value="" disabled>
    
        <br>
        <br>
        
        <!-- Second Selection -->
        Select Food:
        <select id="dropdownList2" name="dropdownList2" onchange="getSelectValue();">
            <option value="">Prawn Aglio Olio</option>
            <option value="Carbonara">Carbonara</option>
        </select>
        <br>
    
        Select Quantity:
        <input type="text" id="amount_2">
        <br>
    
        Price per unit:
        <input type="text" id="price_2" value="" disabled>
    
        <br>
    
        <input type ="button" value="Submit">
        <a href="vendor.jsp">
            <input type="button" value="Back">
        </a>
    </form>
    

Answer 1

尝试在数量的输入中写入相同的事件（getSelectedValue()）

尽量在一开始就初始化所有变量，这样一切都更干净

检查输入的element.value“数量”是否存在，如果存在，填写“价格”字段

测试一下

  function getSelectValue() {


        var dropdownList = document.getElementById("dropdownList");
        var price_1 = document.getElementById("price_1")
        var amount_1 = document.getElementById("amount_1");


        var dropdownList2 = document.getElementById("dropdownList2");
        var price_2 = document.getElementById("price_2");
        var amount_2 = document.getElementById("amount_2");

        var currentPrice1 = "$" + 0;
        var currentPrice2 = "$" + 0;
        if (amount_1.value) {
            if (dropdownList.value === 'Carbonara') {
                currentPrice1 = 4.50 * parseFloat(amount_1.value);
            } else {
                currentPrice1 = 3.50 * parseFloat(amount_1.value);
            }
            price_1.value = "$" + currentPrice1;
        }
        if (amount_2.value) {
            if (dropdownList2.value === 'Carbonara') {
                currentPrice2 = 4.50 * parseFloat(amount_2.value);
            } else {
                currentPrice2 = 3.50 * parseFloat(amount_2.value);

            }
            price_2.value = "$" + currentPrice2;
        }
    }

Select Food:
        <select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
            <option value="Prawn Aglio Olio">Prawn Aglio Olio</option>
            <option value="Carbonara">Carbonara</option>
        </select>
        <br>
    
        Select Quantity:
        <input type="number" id="amount_1"   onchange="getSelectValue();">
        <br>
    
        Price per unit:
        <input type="text" id="price_1" value="" disabled>
    
        <br>
        <br>
        
        <!-- Second Selection -->
        Select Food:
        <select id="dropdownList2" name="dropdownList2" onchange="getSelectValue();">
            <option value="">Prawn Aglio Olio</option>
            <option value="Carbonara">Carbonara</option>
        </select>
        <br>
    
        Select Quantity:
        <input type="number" id="amount_2"  onchange="getSelectValue();">
        <br>
    
        Price per unit:
        <input type="text" id="price_2" value="" disabled>
    
        <br>
    
        <input type ="button" value="Submit">
        <a href="vendor.jsp">
            <input type="button" value="Back">
        </a>
    </form>