时间戳

首页 > 解决方案 > 进度条不适用于我的 JavaScript 代码

javascript - 进度条不适用于我的 JavaScript 代码

问题描述

目前，我有一些加号按钮和减号按钮可以随着固定值一起增加和减少，但我现在的问题是我希望我的进度条在单击每个加号按钮并增加时减少。已经编写了一些 Javascript 代码，但它仍然对我不起作用，除了进度条尚未与我的代码一起运行外，所有其他事情实际上都运行良好。我在下面使用的代码

var total = document.querySelector(".Fixed_number");
var minusBtn = document.querySelectorAll("#minus");
var plusBtn = document.querySelectorAll("#plus");
var GetTotal = document.getElementById('get_all');
var value1 = document.getElementById('Contestant_One');
var value2 = document.getElementById('Contestant_Two');
var value3 = document.getElementById('Contestant_Three');
var value4 = document.getElementById('Contestant_Four');
var progress_bar = document.querySelector("progress-bar");

plusBtn.forEach(function(item) {
    item.onclick = function() {
        if (parseInt(total.innerText) > 0) {

            item.nextElementSibling.innerText = parseInt(item.nextElementSibling.innerText) + 1;
            total.innerText = parseInt(total.innerText) - 1;




            plusBtn.onclick = function() {
                if (parseInt(total.innerText) < 0) { return; }
                parseInt(total.innerText) --;
                progress_bar.css("width", Math.round(100 * parseInt(total.innerText)) + "%");
            };

            if (parseInt(total.innerText) == 0) {
                console.log(item);
            }













        }
    };
});

minusBtn.forEach(function(item) {
    item.onclick = function() {
        if (parseInt(item.previousElementSibling.innerText) > 0) {
            item.previousElementSibling.innerText = parseInt(item.previousElementSibling.innerText) - 1;
            total.innerText = parseInt(total.innerText) + 1;
        }
    };
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <title>Testing JS</title>
</head>

<body>

    <!-- <div id="myProgress">
        <div class="progress_bar"></div>
    </div> -->



    <div style="padding: 1em;">
        <div class="progress">
            <!--     <div id="progressbar" class="progress-bar progress-bar-striped active" style="width: 5%"></div> -->
            <div class="progress" style="height: 20px; width: 50px;">
                <div style="width: 50%;" class="progress-bar"></div>
            </div>
            <button id="next">next</button>
        </div>



        <div class="Fixed_number">10</div>

        <ul class="countries">

            <form>
                <label for=""> Contestant_One
        <div id="" class="country">
            <button id="plus"   type="button">+</button>
            <span id="Contestant_One" class="Contestant-One" >0</span>
            <button id="minus"  type="button">-</button>
        </div>
        </label>
            </form>




            <form>
                <label for=""> Contestant_Two
        <div id="" class="country">
            <button id="plus" type="button">+</button>
            <span id="Contestant_Two" class="Contestant-Two" >0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
            </form>


            <form>
                <label for="" class="country"> Contestant_Three
        <div id="">
            <button id="plus" type="button">+</button>
            <span id="Contestant_Three" class="Contestant-Three" >0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
            </form>




            <form>
                <label for="">Contestant_Four
        <div id="" class="country">
            <button id="plus" type="button">+</button>
            <span id="Contestant_Four" class="Contestant-Four" >0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
            </form>
        </ul>


        <div id="all_total">
            <div id="message"> </div>
            <!-- <button id="get_all" type="submit"></button> -->
        </div>






        <script type="text/javascript" src="app.js"></script>


</body>

</html>

当也单击减号按钮时。已经写了一些代码，但它不工作。我正在使用的代码如下。

标签： javascripthtmlalgorithm

解决方案

在我看来，您正在将一个函数分配给一个 onclick 事件，并且在这个函数中您将另一个函数分配给另一个 onclick 事件。尝试从中删除所有内容，除了检查 < 0 和宽度更改。

plusBtn.onclick = function() {
      if (parseInt(total.innerText) < 0) { return; }
      parseInt(total.innerText) --;
      progress_bar.css("width", Math.round(100 * parseInt(total.innerText)) + "%");
};

我用这样的东西测试了它：

item.nextElementSibling.innerText = parseInt(item.nextElementSibling.innerText) + 1;
total.innerText = parseInt(total.innerText) - 1;

if (parseInt(total.innerText) < 0) {
    return;
}

document.getElementById("bar").style.width = Math.round(10 * parseInt(total.innerText))  + "%";

我还将数字从100 更改为 10，因为使用您的代码，进度条的宽度将是 1000% 而不是 100%。

将最后一行复制到减号按钮 onclick 函数也很重要！

概括：

删除plusBtn.onclick = function() {和parseInt(total.innerText) --;

改变var progress_bar = document.querySelectorAll("progress-bar");

至var progress_bar = document.querySelector(".progress-bar");

改变 progress_bar.css("width", Math.round(100* parseInt(total.innerText)) + "%");

至progress_bar.style.width = Math.round(10* parseInt(total.innerText)) + "%";

并复制这个

progress_bar.style.width = Math.round(10 * parseInt(total.innerText)) + "%";

也可以点击所有减号按钮。

推荐阅读