CODEWITHSUNDEEP
javascripthtmldom
Shiranox
Shiranox

Reputation: 111

How can I show different text on click?

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>

Upvotes: 0

Views: 517

Answers (1)

stacj
stacj

Reputation: 1121

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>

Upvotes: 1

Related Questions