Ограничить количество символов, добавляемых к элементу в JS

Question

Я пытаюсь создать веб-приложение на основе обратного отсчета телешоу, в котором пользователь выбирает 8 букв: гласный или согласный. Мне удалось создать кнопки, которые генерируют одну из них, но я не знаю, как ограничить контейнер букв только 8 символами.

Я полностью застрял в том, что делать дальше. Я не знаю, нужно ли мне создавать массив или есть ли возможность установить ограничение для элемента letterContainer. Пожалуйста, смотрите мой код ниже:

var counter = 0;

while(counter<=8){
counter++;
document.querySelector("button").addEventListener("click", genCon);
}

function genCon() {

  var letterContainer = document.querySelectorAll("h2")[0];

  var con = ["b", "c", "d", "f", "g", "h", "j", "k", "l", "m", "n", "p", "q", "r", "s", "t", "v", "w", "x", "y", "z"];

  var randomNumber = Math.floor((Math.random() * con.length));

  var randomCon = con[randomNumber];

  var addCon = document.createTextNode(randomCon.toUpperCase());

  letterContainer.appendChild(addCon);

}

document.querySelectorAll("button")[1].addEventListener("click", genVowel);

var letterContainer = document.querySelectorAll("h2")[0];

function genVowel() {

  var vowel = ["a", "e", "i", "o", "u"];

  var randomNumber = Math.floor((Math.random() * vowel.length));

  var randomVowel = vowel[randomNumber];

  var addVowel = document.createTextNode(randomVowel.toUpperCase());

  letterContainer.appendChild(addVowel);

}

Answer 1

Это может быть довольно просто, если вы используете rando js .com . Функция rando() выберет символ из строки для вас. И чтобы ограничить количество символов до 8, просто убедитесь, что оно в настоящее время меньше 8, прежде чем добавлять.

function pickFrom(letters) {
  var board = document.getElementById("board");
  if (board.innerHTML.length < 8) board.innerHTML += rando(letters);
}

<script src="https://randojs.com/1.0.0.js"></script>
<h2 id="board"></h2>
<button onclick="pickFrom('BCDFGHJKLMNOPQRSTVWXYZ');">Consonant</button>
<button onclick="pickFrom('AEIOU');">Vowel</button>

Обратите внимание: поскольку для этого используется rando js, вы должны иметь это в заголовке документа html, чтобы этот код работал:

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

Answer 2

Я добавил комментарии во фрагмент ниже, чтобы объяснить способ управления максимально допустимой длиной результата.

Если вы не хотите, чтобы буквы останавливались на восьми, но вы захотите на pu sh более ранний символ, вы можете заменить addLetter на

function addLetter(letter) {
  text = (text + letter).slice(-8);
}

const consonants = ["b", "c", "d", "z"]; // omitted some
const vowels = ["a", "e", "i", "o", "u"];

const letterContainer = document.querySelectorAll("h2")[0];
document.querySelector("#addConsonant").addEventListener("click", genCon);
document.querySelector("#addVowel").addEventListener("click", genVowel);

// You could keep the results in this variable
let text = '';

// Calling this function to update it with the letter of your choice
function addLetter(letter) {
  // but it will also control the length of it
  if (text.length <= 8)
    text += letter;
}

function pickRandomFrom(collection) {
  const randomNumber = Math.floor((Math.random() * collection.length));

  return collection[randomNumber];
}

// then write the results to HTML
function genCon() {
  addLetter(pickRandomFrom(consonants));
  letterContainer.innerText = text.toUpperCase();
}

function genVowel() {
  addLetter(pickRandomFrom(vowels));
  letterContainer.innerText = text.toUpperCase();
}

<h2>

</h2>
<button id="addConsonant">
Add Consonant
</button>
<button id="addVowel">
Add Vowel
</button>