Блог

Главная - Вопросы по программированию - Мой код javascript не помещает элементы в мой массив, и я не могу понять, почему?

Мой код javascript не помещает элементы в мой массив, и я не могу понять, почему?

#javascript #html #arrays #loops #push

#javascript #HTML #массивы #циклы #толкать

Вопрос:

Итак, основная идея моего кода заключается в следующем.

Есть выбор из 7 флажков и кнопки, которая должна обрабатывать результаты при нажатии.

Если установлены два флажка, функция должна напечатать выделение, если количество флажков меньше или больше 2, тогда должно появиться предупреждение с сообщением об ошибке.

Чтобы отслеживать количество установленных флажков, я запускал цикл, равный количеству флажков, и каждый раз array[index] == true значение для данного флажка должно добавляться в массив с именем selections .

Похоже, что моему коду не удается добавить элементы в выбранные элементы массива, и я не понимаю, почему.

Кто-нибудь может пролить свет на это для меня?

 <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 = [];
  }
}

Комментарии:

1. checkedSides[j].check === true должно быть checkedSides[j].checked . Я рекомендую вам переключиться на использование TypeScript, чтобы выявить подобные ошибки.

2. Я бы предположил, что понимание элементов DOM и их свойств гораздо более ценно, чем изучение TypeScript — конечно, TypeScript может помочь избежать таких простых ошибок, — но тогда чему вы учитесь? Ничего

3. очень сложный способ кодирования формы….

4. @Bravo Изучение свойств элементов DOM наизусть — не лучшее использование времени программиста. Использование языка, такого как TypeScript, с IDE, который при появлении запроса отобразит для вас правильные свойства (IntelliSense, завершение кода и т. Д.), — это счастливая среда.

5. @Dai — мы расходимся во мнениях: p

Ответ №1:

Попробуйте этот способ, объявите счетчик и массив при нажатии функции вызова, чтобы проверить все элементы, используя циклы for .

если установлен флажок == 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>
        <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>

Ответ №2:

Вы можете использовать селектор псевдокласса css ":checked" , чтобы получить только проверенные входные данные в виде списка узлов, используя .querySelectorAll вот пример:

 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>

Ответ №3:

самый простой способ … (?)

 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>

Ответ №4:

Извините всех, у меня была очень простая опечатка.проверьте, где я должен был быть.проверил, где мой код печатается как [if (checkedSides[j].check === true)] .

Метки: , ,