文章/答案/技术大牛

发布

社区首页 >问答首页 >我的javascript代码不会将元素推送到我的数组中，我不知道为什么？

问我的javascript代码不会将元素推送到我的数组中，我不知道为什么？
EN

Stack Overflow用户

提问于 2020-11-25 13:13:08

回答 4查看 88关注 0票数 0

所以我的代码背后的基本思想是这样的。

有一个由7个复选框和一个按钮组成的选择，该按钮用于在单击时处理结果。

如果选中两个框，则函数应打印选择，如果选中框的数量小于或大于2，则应显示一条显示错误消息的警告。

为了跟踪复选框的数量，我运行了一个等于复选框数量的循环，每次选择时，该给定复选框的值都应该添加到一个名为array[index] == true的数组中。

我的代码似乎没有将元素添加到数组选择中，我看不出是什么原因。

有人能为我解释一下吗？

<fieldset>
  <legend>Side Dishes</legend>
  <h3>Pick two side dishes</h3>
  <input type="checkbox" name="sides" id="1" value="French Fries">French Fries<br />
  <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
  <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
  <input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
  <input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mix 
  Vegetables<br />
  <input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni 
  and Cheese<br />
  <input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
  <input type ="button" value = "Enter my side dish selections" id="sideselect"/>
</fieldset>

document.querySelector("#sideselect").addEventListener("click", validateSelection);

function validateSelection() {
  //Creates a list of check boxes to count true or false.
  var checkedSides = document.getElementsByName("sides");
  //Array to hold selected check boxes.
  var selections = [];
  console.log(checkedSides);
  console.log(checkedSides[1].value);

  for (var j = 0; j < checkedSides.length; j++) {
    //Inserts selected items into selections.
    if (checkedSides[j].check === true) {
      selections.push(checkedSides[j].value);
    }
  }

  console.log(selections);

  //Prints the first and second selected side to output if exactly 2 sides are selected.
  if (selections.length === 2) {
    document.querySelector("#side_one").textContent = selections[0];
    document.querySelector("#side_two").textContent = selections[1];
    //Tells the user they have selected too few items and clears selections.
  } else if (selections.length < 2) {
    alert("Please select at least 2 sides.");
    selections = [];
    //Tells the user they have selected too many items and clears selections. 
  } else if (selections.length > 2) {
    alert("Order is limited to 2 sides. Please adjust your selection.");
    selections = [];
  }
}

javascript

html

arrays

loops

push

回答 4

Stack Overflow用户

发布于 2020-11-25 13:40:00

尝试这种方法，在单击调用函数时声明计数器和数组，以检查使用for循环的所有元素。

如果选中==，则将值或id添加到数组中。

如果你有问题，请告诉我。

<fieldset>
        <legend>Side Dishes</legend>
        <h3>Pick two side dishes</h3>
        <input type="checkbox" name="sides" id="1" value="French Fries">French Fries<br />
        <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
        <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
        <input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
        <input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mix 
        Vegetables<br />
        <input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni 
        and Cheese<br />
        <input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
        <input type ="button"  value = "Enter my side dish selections" id="sideselect"/>
        </fieldset>
        <script>
            
            let sel =[];
            let counter=0;
            selection=()=>{
                
                for (let i = 1; i < 8; i++) {
                    let a = document.getElementById(i);
                    
                    if(a.checked ===true){
                        sel[counter] = a.value;
                        counter++;
                    }
                    
                }
                if(counter<3){
                alert("You Selected 2 or less Items ");
                }else{
                    console.log(sel);
                    
                }
            }
            document.getElementById("sideselect").addEventListener("click", selection);
        </script>

票数 0

Stack Overflow用户

发布于 2020-11-25 13:54:00

您可以使用.querySelectorAll使用css伪类选择器":checked"来仅获取检查过的输入作为节点列表。下面是一个示例：

document.querySelector("#sideselect").onclick = function() {
  let checkedSides = document.querySelectorAll("[name='sides']:checked");
  if(checkedSides.length > 2) {
    alert("Order is limited to 2 sides. Please adjust your selection.");
  }else if(checkedSides.length < 2) {
    alert("Please select at least 2 sides.");
  }else {
    // just for demonstration although there will be only two I like to use forEach :)
    checkedSides.forEach(checkedSide => console.log(checkedSide.value));
    // submit or do whatever with the data
  }
}

<fieldset>
  <legend>Side Dishes</legend>
  <h3>Pick two side dishes</h3>
  <input type="checkbox" name="sides" id="1" value="French Fries">French Fries<br />
  <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
  <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
  <input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
  <input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mix 
  Vegetables<br />
  <input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni 
  and Cheese<br />
  <input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br />
  <input type ="button" value = "Enter my side dish selections" id="sideselect"/>
</fieldset>

票数 0

Stack Overflow用户

发布于 2020-11-25 14:00:24

最简单的方法...(？)

const myForm = document.forms['my-form']
  ;
myForm.onsubmit = evt =>
  {
  evt.preventDefault()  // disable submit
  
  let selections =      // get Selections
    [...myForm.sides].reduce((r,s)=>  
        {
        if (s.checked) r.push(s.value)
        return r
        },[])

  myForm.side_one.value = (selections.length===2) ? selections[0] : ''
  myForm.side_two.value = (selections.length===2) ? selections[1] : ''

  if (selections.length < 2) alert("Please select at least 2 sides.")
  if (selections.length > 2) alert("Order is limited to 2 sides. Please adjust your selection.")
  }

<form name="my-form">
  <fieldset>
    <legend>Side Dishes</legend>
    <h3>Pick two side dishes</h3>

    <label> <input type="checkbox" name="sides" value="French Fries"        > French Fries        </label><br>
    <label> <input type="checkbox" name="sides" value="Baked Potato"        > Baked Potato        </label><br>
    <label> <input type="checkbox" name="sides" value="Cole Slaw"           > Cole Slaw           </label><br>
    <label> <input type="checkbox" name="sides" value="Garden Salad"        > Garden Salad        </label><br>
    <label> <input type="checkbox" name="sides" value="Mixed Vegetables"    > Mix Vegetables      </label><br>
    <label> <input type="checkbox" name="sides" value="Macaroni and Cheese" > Macaroni and Cheese </label><br>
    <label> <input type="checkbox" name="sides" value="Applesauce"          > Applesauce          </label><br>
  </fieldset>

  <br>
  <button type="submit">Enter my side dish selections</button>
  <br>  <br>
  <fieldset>
    <legend>choices</legend>
    -- <input type="text" name="side_one" readonly> <br>
    -- <input type="text" name="side_two" readonly> <br>
  </fieldset>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64998861

复制

相似问题

问我的javascript代码不会将元素推送到我的数组中，我不知道为什么？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的javascript代码不会将元素推送到我的数组中，我不知道为什么？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的javascript代码不会将元素推送到我的数组中，我不知道为什么？
EN