Добавление диапазона от JS

Question

Почему мой диапазон применяется только к первой добавляемой букве и останавливает работу кнопок после первой. Однако, если я уберу метки добавления спама, он будет работать без пролётов.

 var letterContainer = document.querySelector(".letter-container");

 document.querySelector(".vow").addEventListener("click", pickFrom(letters));

 function pickFrom(letters) {

   // if the length of the letter container is less than 8
   if (letterContainer.innerHTML.length < 8) {

     //add letters to the letter container
     letterContainer.innerHTML += "<span>"+ rando(letters)+"</span>";

   }

Answer 1

попробуйте это:

var letterContainer = document.querySelector(".letter-container");
let currentLetters = [];
function pickFrom(letters) {

  //or if want to use your original condition without introducing state
  // letterContainer.innerHTML.length < (13*8+8)
   // if the length of the letter container is less than 8
   if (currentLetters.length < 8) {



     //add letters to the letter container
     currentLetters.push(rando(letters));
     letterContainer.innerHTML = currentLetters.map(item => `<span>${item}</span>`).join("");





   }
   }

<script src="https://randojs.com/1.0.0.js"></script>

<div class = "letter-container">
</div>

<button class ="con letter-btn btn btn-outline-light btn-lg" onclick="pickFrom('BCDFGHJKLMNPQRSTVWXYZ');">Consonant</button>
<button class =" vow letter-btn btn btn-outline-light btn-lg" onclick="pickFrom('AEIOU');">Vowel</button>