将限制字符添加到JS中的元素中

Question

我正在尝试根据电视节目倒计时创建一个Web应用，其中用户选择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

我在下面的代码段中添加了注释，以说明一种控制结果的最大允许长度的方法。

[如果您不希望字母以8结尾，但您想将较早的字符推出，可以将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>

Answer 2

如果使用randojs.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>
<div id="board"></div>
<button onclick="pickFrom('BCDFGHJKLMNOPQRSTVWXYZ');">Consonant</button>
<button onclick="pickFrom('AEIOU');">Vowel</button>

请注意，因为它使用randojs，所以必须在html文档的开头使用此代码，这样代码才能起作用：

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