时间戳

首页 > 解决方案 > 将元素的值推送到对象数组

javascript - 将元素的值推送到对象数组

问题描述

我试图将一个元素的值推送到一个对象数组中，但我所做的只是为所有其他元素返回第一个元素内部 Html。我正在使用的代码附件。我实际上应该得到每个元素。它适用于所有参赛者。然后我应该可以推到上面的空对象，以保持所有参赛者的得分超出固定值。像显示对象 = {contestant_one: 5,...}

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');

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;


            if (parseInt(total.innerText) == 0) {


                const countries = document.querySelectorAll('.country');

                const result = [];

                for (const country of countries) {
                    let resEl = {};

                    [...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = value1.innerHTML)
                    result.push(resEl);
                }

                console.log(result)


            }
        }
    };
});

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;
        }
    };
});



/*My Console.log(result) output suppose to be something like

0: {one: "3"}
1: {two: "2"}
2: {three: "2"}
3: {four: "6"}
length: 4



but it's only using the first value for other objects so it's returning something like

0: {one: "9"}
1: {two: "9"}
2: {three: "9"}
3: {four: "9"}
length: 4

*/
<body>
    <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">
        <button id="get_all" type="submit">Get Totals</button>
    </div>






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


</body>

标签： javascripthtmlalgorithm

解决方案

[...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = value1.innerHTML)

你硬编码value1，它应该是动态的，如：

[...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = document.getElementById(span.id).innerHTML)

推荐阅读