单击按钮时增加和减少输入值[重复]答案

【问题标题】：increment and decrement the input value when click on button [duplicate]单击按钮时增加和减少输入值[重复]
【发布时间】：2021-09-16 02:09:05
【问题描述】：

我遇到了一个问题，当我点击+，-按钮时，数量值会适当增加和减少，但我也希望当我点击增加和减少按钮时，价格也会增加和减少。我想在单击 + 或 - 按钮时增加和减少价格的值

index.html

这是我编写整个 ui 部分的 index.html 文件

 <div class="container">
        <h3>Solar terrace light with inbuilt panel</h3>
        <div class="row">
            <div class="col-md-6">
                <img src="https://s3.ap-south-1.amazonaws.com/rzp-prod-merchant-assets/payment-link/description/pr11_hq0cy7e5cmwbzw"
                    class="w-75">
            </div>
            <div class="col-md-6 mt-3">
                <div class="card p-4">
                    <h4>Payment Details</h4>
                    <div class="row mt-2">
                        <div class="col-3">
                            <p>Qty.</p>
                        </div>
                        <div class="col-9">
                            <div class="quantity">
                                <button class="btn minus-btn disabled" type="button">-</button>
                                <input type="text" id="quantity" value="1">
                                <button class="btn plus-btn" type="button">+</button>
                            </div>

                            <!--will calculate price---->

                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-3">
                            <p>Name</p>

                        </div>
                        <div class="col-9">
                            <input type="text" class="w-100">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p>Email</p>

                        </div>
                        <div class="col-9">
                            <input type="text" class="w-100">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p>Phone</p>

                        </div>
                        <div class="col-9">
                            <input type="text" class="w-100">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p>Price</p>

                        </div>
                        <div class="col-9">
                            <p class="total-price">
                                <span><i class="fas fa-rupee-sign" style="color: black;"></i></span>
                                <input id="price" class="text-dark" value="12,999"> 
                            </p>
                        </div>
                    </div>
                    <button class="btn btn-primary">Buy Now</button>
                </div>
            </div>
        </div>
    </div>

index.js

这是我为递增和递减编写整个逻辑部分的 index.js 文件

  document.querySelector(".minus-btn").setAttribute("disabled", "disabled");

        //taking value to increment decrement input value
        var valueCount

        //taking price value in variable
        var price = document.getElementById("price").innerText;

        //price calculation function
        function priceTotal() {
            var total = valueCount * price;
            document.getElementById("price").innerText = total
        }

        //plus button
        document.querySelector(".plus-btn").addEventListener("click", function () {
            //getting value of input
            valueCount = document.getElementById("quantity").value;

            //input value increment by 1
            valueCount++;

            //setting increment input value
            document.getElementById("quantity").value = valueCount;

            if (valueCount > 1) {
                document.querySelector(".minus-btn").removeAttribute("disabled");
                document.querySelector(".minus-btn").classList.remove("disabled")
            }

            //calling price function
            priceTotal()
        })

        //plus button
        document.querySelector(".minus-btn").addEventListener("click", function () {
            //getting value of input
            valueCount = document.getElementById("quantity").value;

            //input value increment by 1
            valueCount--;

            //setting increment input value
            document.getElementById("quantity").value = valueCount

            if (valueCount == 1) {
                document.querySelector(".minus-btn").setAttribute("disabled", "disabled")
            }

            //calling price function
            priceTotal()
        })

【问题讨论】：

innerText 是 input 元素的自定义属性，请改用 value。另外，JS 中的小数点分隔符是一个点.。

标签： javascript html css bootstrap-4

【解决方案1】：

有很多东西不适用于您的代码，首先，默认情况下输入值都是字符串，因此您无法将它们相乘，您需要使用parseInt（如果您想要整数）或@987654322 @如果你想要小数。第二件事，如果你想要输入元素中的文本，你需要使用“.value”而不是“.innerText”，第三也是最后一件事。如果您的产品是 12999，您需要将其输入完整编号，并且仅使用 , 在另一个代码中显示它或使用 .并使其仅作为小数工作，然后将您的点替换为显示的昏迷

在 HTML 端看起来像这样：

<div class="container">
        <h3>Solar terrace light with inbuilt panel</h3>
        <div class="row">
            <div class="col-md-6">
                <img src="https://s3.ap-south-1.amazonaws.com/rzp-prod-merchant-assets/payment-link/description/pr11_hq0cy7e5cmwbzw"
                    class="w-75">
            </div>
            <div class="col-md-6 mt-3">
                <div class="card p-4">
                    <h4>Payment Details</h4>
                    <div class="row mt-2">
                        <div class="col-3">
                            <p>Qty.</p>
                        </div>
                        <div class="col-9">
                            <div class="quantity">
                                <button class="btn minus-btn disabled" type="button">-</button>
                                <input type="text" id="quantity" value="1">
                                <button class="btn plus-btn" type="button">+</button>
                            </div>

                            <!--will calculate price---->

                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-3">
                            <p>Name</p>

                        </div>
                        <div class="col-9">
                            <input type="text" class="w-100">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p>Email</p>

                        </div>
                        <div class="col-9">
                            <input type="text" class="w-100">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p>Phone</p>

                        </div>
                        <div class="col-9">
                            <input type="text" class="w-100">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <p>Price</p>

                        </div>
                        <div class="col-9">
                            <p class="total-price">
                                <span><i class="fas fa-rupee-sign" style="color: black;"></i></span>
                                <input id="price" class="text-dark" value="12.999"> 
                            </p>
                        </div>
                    </div>
                    <button class="btn btn-primary">Buy Now</button>
                </div>
            </div>
        </div>
    </div>

在 Javascript 方面就像这样：

document.querySelector(".minus-btn").setAttribute("disabled", "disabled");

        //taking value to increment decrement input value
        var valueCount

        //taking price value in variable
        var price = document.getElementById("price").value;
        console.log(price);

        //price calculation function
        function priceTotal() {
            var total = parseFloat(valueCount) * parseFloat(price);
            document.getElementById("price").value = total
        }

        //plus button
        document.querySelector(".plus-btn").addEventListener("click", function () {
            //getting value of input
            valueCount = document.getElementById("quantity").value;

            //input value increment by 1
            valueCount++;

            //setting increment input value
            document.getElementById("quantity").value = valueCount;

            if (valueCount > 1) {
                document.querySelector(".minus-btn").removeAttribute("disabled");
                document.querySelector(".minus-btn").classList.remove("disabled")
            }

            //calling price function
            priceTotal()
        })

        //plus button
        document.querySelector(".minus-btn").addEventListener("click", function () {
            //getting value of input
            valueCount = document.getElementById("quantity").value;

            //input value increment by 1
            valueCount--;

            //setting increment input value
            document.getElementById("quantity").value = valueCount

            if (valueCount == 1) {
                document.querySelector(".minus-btn").setAttribute("disabled", "disabled")
            }

            //calling price function
            priceTotal()
        })

【讨论】：

【解决方案2】：

您只需要在“innerHtml”中加上“value”并从价格中删除“,”（逗号）。就是这样！

【讨论】：