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

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 "Quanity“是否存在，如果存在，请填写”价格“字段

测试这个

​

  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>

​