时间戳

首页 > 解决方案 > 使用键将点击次数推送到对象

javascript - 使用键将点击次数推送到对象

问题描述

请问如何将点击次数与指定值的键一起推送到对象中？我在下面使用的代码。例如; 它变成了 Var Value_object = {contestant_one: 4, contestant_two: 7,...}

var total = document.querySelector(".Fixed_number");
var minusBtn = document.querySelectorAll("#minus");
var allSpan = document.getElementById('displayvalue');
var plusBtn = document.querySelectorAll("#plus");
var value_object = {};

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;

        }
    };

});

minusBtn.forEach(function(item) {
    let variable;
    item.onclick = function() {
        if (parseInt(item.previousElementSibling.innerText) > 0) {
            item.previousElementSibling.innerText = parseInt(item.previousElementSibling.innerText) - 1;
            total.innerText = parseInt(total.innerText) + 1;
        }
    };
});
<body>
    <div class="Fixed_number">10</div>


    <form>
        <label for=""> Contestant_One
        <div id="">
            <button id="plus"   type="button">+</button>
            <span id="displayvalue">0</span>
            <button id="minus"  type="button">-</button>
        </div>
        </label>
    </form>




    <form>
        <label for=""> Contestant_Two
        <div id="">
            <button id="plus" type="button">+</button>
            <span id="displayvalue">0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
    </form>


    <form>
        <label for=""> Contestant_Three
        <div id="">
            <button id="plus" type="button">+</button>
            <span id="displayvalue">0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
    </form>




    <form>
        <label for="">Contestant_Four
        <div id="">
            <button id="plus" type="button">+</button>
            <span id="displayvalue">0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
    </form>


push the number of clicks into an object with their key from a specified value? the code I'm working with below.

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


</body>

标签： javascripthtmlalgorithm

解决方案

尝试这个：

const body = document.querySelector('body');
body.addEventListener('click', handleClick);
const fixedNum = document.querySelector('#Fixed_number');
let fixedNumCount = 10;
const value_object = {};

function handleClick(e) {
    const targetEl = e.target.type;
    const contestant = e.target.parentElement.id;
    const operation = e.target.dataset.operation;
    if (targetEl === 'button') {
        if (value_object[contestant] === undefined) {
            if (operation === 'plus') {
                value_object[contestant] = 1; 
                fixedNumCount--;
            } else {
                value_object[contestant] = -1;
                fixedNumCount++;
            }
        } else {
            if (operation === 'plus') {
                value_object[contestant] = ++value_object[contestant];
                fixedNumCount--
            } else {
                value_object[contestant] = --value_object[contestant];
                fixedNumCount++
            }
        }
        document.querySelector(`div#${contestant} span`).textContent = value_object[contestant]
        fixedNum.textContent = fixedNumCount;
    }
}

注意：我只是将重复的 id 更改为 class，因为正如 @trincot 所提到的，您不应该在多个元素上使用相同的 id。

    <body>
        <div id="Fixed_number">10</div>
        <form>
            <label for="">Contestant_One
                <div id="contestant_one">
                    <button data-operation="plus" type="button">+</button>
                        <span class="displayvalue">0</span>
                    <button data-operation="minus"  type="button">-</button>
                </div>
            </label>
        </form>

        <form>
            <label for="">Contestant_Two
                <div id="contestant_two">
                    <button data-operation="plus" type="button">+</button>
                        <span class="displayvalue">0</span>
                    <button data-operation="minus" type="button">-</button>
                </div>
            </label>
        </form>

        <form>
            <label for="">Contestant_Three
                <div id="contestant_three">
                    <button data-operation="plus" type="button">+</button>
                        <span class="displayvalue">0</span>
                    <button data-operation="minus" type="button">-</button>
                </div>
            </label>
        </form>

        <form>
            <label for="">Contestant_Four
                <div id="contestant_four">
                    <button data-operation="plus" type="button">+</button>
                        <span class="displayvalue">0</span>
                    <button data-operation="minus" type="button">-</button>
                </div>
            </label>
        </form>

        <script src="script.js"></script>
    </body>

推荐阅读