如何在点击时显示不同的文字？答案

【问题标题】：How can I show different text on click?如何在点击时显示不同的文字？
【发布时间】：2022-02-01 22:14:32
【问题描述】：

我正在构建一个简单的记忆游戏，只是为了展示功能。用户插入一个字符串，我将其随机播放并在屏幕上显示拆分字符 - 作为星星。 (* * * *)

当用户点击星号时，它会显示数字的真实值。

现在我有一个用于输入的文本框，我打乱了字符，但我不确定使用该数组并将字符串呈现为星号的最佳方法是什么，onclick 将翻转回真正的字符。感谢您的帮助！

const section = document.querySelector("section");

function myFunction() {
  var input = document.getElementById("searchTxt").value;
  const x = document.querySelector("p");
  const yourInp = "Your input is: "
  x.textContent = yourInp;

  document.getElementById("str").innerHTML = input;
  const cards = input.split('');


  const randomize = () => {
    cards.sort(() => Math.random() - 0.5);
    return cards;
  };

  const cardsGenerator = () => {
    const cards = randomize();
    console.log(cards);
    cards.forEach(item => {
      console.log(item);
    });

  }
  cardsGenerator();
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memory Game</title>
</head>

<body>
  <h1> Memory Game </h1>
  <input name="searchTxt" type="search" maxlength="4" id="searchTxt" class="searchField" value="Word" />
  <button onclick="myFunction()">Start Game</button>
  <p id="yourstr"> </p>
  <p id="str"> </p>

  <section></section>
</body>

【问题讨论】：

仅供参考：您的洗牌方式非常棒。你应该看看stackoverflow.com/questions/2450954/…
因此您需要创建元素（span、div 或 li）并将点击事件添加到这些元素。

标签： javascript html dom

【解决方案1】：

也许你想看看这个方法：

const section = document.querySelector("section");

function myFunction() {
  var input = document.getElementById("searchTxt").value;
  const x = document.querySelector("p");
  const yourInp = "Your input is: " + input;
  x.textContent = yourInp;
  const cards = input.split('');

  const randomize = () => {
    cards.sort(() => Math.random() - 0.5);
    return cards;
  };

  const cardsGenerator = () => {
    container.innerText = ''; // clear container
    const cards = randomize();
    cards.forEach(item => {
      const d = document.createElement("div"); // create div
      d.innerText = '*'; // set text to *
      d.onclick = () => { d.innerText = item; } // handle onclick to display real value
      container.appendChild(d); // append div as child to container
    });
  }
  cardsGenerator();
}

div.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 3px;
  background: gray;
  border-radius: 2px;
  font-size: x-large;
}


div.cards > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
  background: white;
  border-radius: 6px;
}

<h1> Memory Game </h1>
<input name="searchTxt" type="search" maxlength="4" id="searchTxt" class="searchField" value="Word" />
<button onclick="myFunction()">Start Game</button>
<p id="yourstr"> </p>

<div class="cards" id="container">

</div>

【讨论】：

是的！谢谢。如果我需要添加 setTimeout 函数，并检查序列是否正确等 - 我可以将它添加到 d.onclick=()=> {...} 吗？还是在哪里？