将元素的值推送到 Object 的数组
[英]Pushing Values of an Element to an Array of Object
问题描述
I'm trying to push the values of an element into an array of objects but what I'm doing is only returning the first element inner Html for all other elements.
我试图将一个元素的值推入一个对象数组，但我所做的只是为所有其他元素返回第一个元素内部 Html。 The code I'm working with attached.我正在使用的代码随附。 I was actually supposed to get for each element.我实际上应该得到每个元素。 It works like that for all the contestants.它对所有参赛者都是如此。 Then I should be able to push to the empty object above to hold all the contestants score out of the fixed value.那我应该可以push到上面那个空的object来把所有参赛选手的分数都出定值了。 Like display object = {contestant_one: 5,...}喜欢显示 object = {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>
2 个解决方案
解决方案1
1 已采纳 2020-08-21 14:52:09
[...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = value1.innerHTML)
You hardcoded value1 , it should be dynamic like:您硬编码了value1 ，它应该是动态的，例如：
[...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = document.getElementById(span.id).innerHTML)
解决方案2
0 2020-08-21 14:49:20
Your mistake is in this line of code [...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = value1.innerHTML)你的错误是在这行代码[...country.querySelectorAll('span[class^="Contestant-"]')].forEach((span) => resEl[span.className.split('-')[1]] = value1.innerHTML)
You add value1.innerHTML to the result array for every element in the forEach loop.您将value1.innerHTML添加到 forEach 循环中每个元素的结果数组。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.