How can I show different text on click?

Question

I'm building a simple memory game just to show functionality. User inserts a string, I shuffle it and present the split chars on the screen - as stars. (* * * *)

Whenever a user will click a star, it will show the real value of the number.

For now I have a text box for input, I shuffle the chars but I'm not sure what is the best way to use that array and present the string as stars that onclick will flip back to the real char. Thanks for helping!

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>

FYI: Your way of shuffling is that that great. You should look at https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — epascarello, Feb 01 '22 at 14:00
So you need to create elements (span, div, or li) and add click events to those elements. — epascarello, Feb 01 '22 at 14:00

score 1 · Accepted Answer · answered Feb 01 '22 at 14:14

Maybe you want to check this approach out:

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>

Yes! thanks. If I need to add setTimeout function, and check if the sequence is correct, etc - can I add it to d.onclick=()=> {...} ? or else where? — Shiranox, Feb 01 '22 at 14:33

How can I show different text on click?

1 Answers1