Estoy construyendo un juego de memoria simple solo para mostrar la funcionalidad. El usuario inserta una cadena, la barajo y presento los caracteres divididos en la pantalla, como estrellas. (* * * *)
Cada vez que un usuario haga clic en una estrella, se mostrará el valor real del número.
Por ahora tengo un cuadro de texto para la entrada, barajo los caracteres pero no estoy seguro de cuál es la mejor manera de usar esa matriz y presentar la cadena como estrellas que al hacer clic volverán al carácter real. ¡Gracias por ayudar!
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>Tal vez quieras comprobar este enfoque:
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>