javascript中动态价格值的问题

问题描述 投票：0回答：1

我在选择值时创建了自动添加价格的脚本。它正在工作并且删除字段正在工作，但仅适用于“li”字符串值。我怎么做，将“li”连接到价格，当按下删除按钮时，它计算正确的价格。例如，如果我将添加少量元素，并尝试删除第一个元素，它将删除正确的对象，但价格将从最后一个中扣除。如何解决？谢谢

问题在里面

<!DOCTYPE html>
<html>

<body>

    <p class="control-label col-xs-4">Ingridients</p>
    <table>
        <tr>
            <div>
                <input type="checkbox" id="coffee" name="coffee" checked>
                <label for="coffee">Coffee</label>
            </div>
        </tr>
        <tr>
            <div>
                <input type="checkbox" id="gym" name="gym">
                <label for="gym">Gym</label>
            </div>
        </tr>
        <tr>
            <div>
                <input type="checkbox" id="rose" name="rose">
                <label for="rose">Rose</label>
            </div>
        </tr>
    </table>
    <select name="oil" id="oil">
        <option value="avokado">Avokado</option>
        <option value="kokos">Kokos</option>
        <option value="vine">Vine</option>
    </select>
    </br>

    <select name="color" id="color">
        <option value="black">black</option>
        <option value="white">white</option>
        <option value="pink">pink</option>
    </select>
    </br>

    <select name="smell" id="smell">
        <option value="rose">rose</option>
        <option value="kokos">Kokos</option>
        <option value="gym">gym</option>
    </select>
    </br>

    <button class="btn" style="float:right" onclick="myFunction()" type="button">Add</button>

    <ul id="myList">

    </ul>
    <p id="price">Price : 0 pln</p>

    <script>
        var idtext = 0
        var varprice = 0;
        var dict = {};

        function myFunction() {

            var checkboxvalue = 0;
            var node = document.createElement("LI");

            var checkBoxCoffe = document.getElementById("coffee");
            var checkBoxGym = document.getElementById("gym");
            var checkBoxRose = document.getElementById("rose");
            var textnode = document.createTextNode("");

            var selectBoxOil = document.getElementById("oil");
            var strOil = selectBoxOil.options[selectBoxOil.selectedIndex].text;

            var selectBoxColor = document.getElementById("color");
            var strColor = selectBoxColor.options[selectBoxColor.selectedIndex].text;

            var selectBoxSmell = document.getElementById("smell");
            var strSmell = selectBoxSmell.options[selectBoxSmell.selectedIndex].text;

            if (checkBoxCoffe.checked == true) {
                textnode.textContent = textnode.textContent + "Coffee; "
                checkboxvalue = checkboxvalue + 1;
            }
            if (checkBoxGym.checked == true) {
                textnode.textContent = textnode.textContent + "Gym; "
                checkboxvalue = checkboxvalue + 1;
            }
            if (checkBoxRose.checked == true) {
                textnode.textContent = textnode.textContent + "Rose; "
                checkboxvalue = checkboxvalue + 1;
            }
            var button = document.createElement("button");
            button.innerHTML = "Remove";

            button.onclick = function() {

                button.parentElement.remove()

                varprice = varprice - dict[idtext];
                document.getElementById("price").innerHTML = 'Price : ' + varprice + ' pln';
                return;
            };

            idtext = idtext + 1
            if (checkboxvalue == 1) {
                dict[idtext] = 5;
            } else if (checkboxvalue == 2) {
                dict[idtext] = 7;
            } else if (checkboxvalue == 3) {
                dict[idtext] = 9;
            }
            varprice = varprice + dict[idtext];
            textnode.id = idtext

            textnode.textContent = "Bomb : \n" + strColor + "; " + strOil + " oil; " + "Smell: " + strSmell + " Ingridients : " + textnode.textContent + idtext + "value " + dict[idtext]

            node.appendChild(textnode);
            node.appendChild(button);
            document.getElementById("myList").appendChild(node);
            document.getElementById("price").innerHTML = 'Price : ' + varprice + ' pln';

        }
    </script>

</body>

</html>

因为它只删除父对象。如何将它与价格联系起来？

javascript html
1个回答
0
投票

在textnode.id = idtext之后添加node.id = idtext

在varprice = varprice - dict[idtext];之后将button.parentElement.remove()改为varprice = varprice - dict[button.parentElement.id];

<!DOCTYPE html>
<html>

<body>

    <p class="control-label col-xs-4">Ingridients</p>
    <table>
        <tr>
            <div>
                <input type="checkbox" id="coffee" name="coffee" checked>
                <label for="coffee">Coffee</label>
            </div>
        </tr>
        <tr>
            <div>
                <input type="checkbox" id="gym" name="gym">
                <label for="gym">Gym</label>
            </div>
        </tr>
        <tr>
            <div>
                <input type="checkbox" id="rose" name="rose">
                <label for="rose">Rose</label>
            </div>
        </tr>
    </table>
    <select name="oil" id="oil">
        <option value="avokado">Avokado</option>
        <option value="kokos">Kokos</option>
        <option value="vine">Vine</option>
    </select>
    </br>

    <select name="color" id="color">
        <option value="black">black</option>
        <option value="white">white</option>
        <option value="pink">pink</option>
    </select>
    </br>

    <select name="smell" id="smell">
        <option value="rose">rose</option>
        <option value="kokos">Kokos</option>
        <option value="gym">gym</option>
    </select>
    </br>

    <button class="btn" style="float:right" onclick="myFunction()" type="button">Add</button>

    <ul id="myList">

    </ul>
    <p id="price">Price : 0 pln</p>

    <script>
        var idtext = 0
        var varprice = 0;
        var dict = {};

        function myFunction() {

            var checkboxvalue = 0;
            var node = document.createElement("LI");

            var checkBoxCoffe = document.getElementById("coffee");
            var checkBoxGym = document.getElementById("gym");
            var checkBoxRose = document.getElementById("rose");
            var textnode = document.createTextNode("");

            var selectBoxOil = document.getElementById("oil");
            var strOil = selectBoxOil.options[selectBoxOil.selectedIndex].text;

            var selectBoxColor = document.getElementById("color");
            var strColor = selectBoxColor.options[selectBoxColor.selectedIndex].text;

            var selectBoxSmell = document.getElementById("smell");
            var strSmell = selectBoxSmell.options[selectBoxSmell.selectedIndex].text;

            if (checkBoxCoffe.checked == true) {
                textnode.textContent = textnode.textContent + "Coffee; "
                checkboxvalue = checkboxvalue + 1;
            }
            if (checkBoxGym.checked == true) {
                textnode.textContent = textnode.textContent + "Gym; "
                checkboxvalue = checkboxvalue + 1;
            }
            if (checkBoxRose.checked == true) {
                textnode.textContent = textnode.textContent + "Rose; "
                checkboxvalue = checkboxvalue + 1;
            }
            var button = document.createElement("button");
            button.innerHTML = "Remove";

            button.onclick = function() {

                button.parentElement.remove()
                varprice = varprice - dict[button.parentElement.id];
                document.getElementById("price").innerHTML = 'Price : ' + varprice + ' pln';
                return;
            };

            idtext = idtext + 1
            if (checkboxvalue == 1) {
                dict[idtext] = 5;
            } else if (checkboxvalue == 2) {
                dict[idtext] = 7;
            } else if (checkboxvalue == 3) {
                dict[idtext] = 9;
            }
            varprice = varprice + dict[idtext];
            textnode.id = idtext
            node.id = idtext

            textnode.textContent = "Bomb : \n" + strColor + "; " + strOil + " oil; " + "Smell: " + strSmell + " Ingridients : " + textnode.textContent + idtext + "value " + dict[idtext]

            node.appendChild(textnode);
            node.appendChild(button);
            document.getElementById("myList").appendChild(node);
            document.getElementById("price").innerHTML = 'Price : ' + varprice + ' pln';

        }
    </script>

</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.