Блог

Я в конечном итоге пытаюсь показать массив в контейнере, который я создал в своем html. Однако большая часть помощи, которую я могу найти, использует jquery для этого проекта, мне не разрешено использовать jquery, кто-нибудь получил какую-либо помощь, вот как далеко я зашел.

Отправить Html

     <label for="yourAnswer">Your Selection:</label>
    <div class="textBox">
      <p id="yourAnswer"></p>
    </div>
 

Javascript

   var array = []
  var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

  for (var i = 0; i < checkboxes.length; i  ) {
    array.push(checkboxes[i].value)
  }
  //Below shows array in console for help
 console.log(array)

 const embedElements = () => {
   array.forEach(element => {
   document.getElementById('yourAnswer').innerHTML  =
   `${element}`;
   });
  };
 

Вы можете использовать Array.from для преобразования getElementsById результата в массив, а затем использовать .map(e => e.value) для извлечения значений, а затем использовать .join(', ') для разделения значений запятыми и пробелами.

 const embedElements = () => {
  document.getElementById('yourAnswer').innerHTML = 
     Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
       .map(e => e.value)
       .join(', ');
}; 

 <label for="yourAnswer">Your Selection:</label>
    <input type="checkbox" id="checkA" value="A" checked><label for="checkA">A</label>
    <input type="checkbox" id="checkB" value="B" ><label for="checkB">B</label>
    <input type="checkbox" id="checkC" value="C" checked><label for="checkC">C</label>
<div class="textBox">
      <p id="yourAnswer"></p>
    </div>
    <button type="button" onclick="embedElements()" >Submit</button>