Tengo un problema para insertar un elemento de matriz aleatorio en el DOM. Quiero que solo lo haga una vez para cada elemento de la matriz, pero el código sigue obteniendo el elemento infinitamente.
Estoy haciendo un juego de cartas y quiero que el código entienda que estoy eligiendo una carta del mazo, por lo que debería eliminarla de la matriz. pero continúa y repite las mismas tarjetas una y otra vez cuando hago clic en el botón. El botón debe robar al azar una carta solo una vez.
Aquí está el código:
<!DOCTYPE html> <html> <head> <title>TEST</title> <style> .testDivExe{ border: 0.1em dashed black; width: 100%; background-color: rgb(192,192,192,0.6); } body{ border: 0.1em dotted black; font-family: impact; font-size: 2em; background-color: rgb(192,192,192,0.4); } </style> </head> <header> <h1>ZONE</h1> </header> <body> <div class="testDivExe" id="testDivExeId"> <button id="testClickId">click</button> <div> <footer> </footer> <script> //TEST1 document.getElementById("testClickId").onclick = function testFunc1(){ // RAND AND ARR var array1 = ["Hello", "There", "Some", "Things", "Never", "Change",]; var deal = function(){ var index = Math.floor(Math.random() * array1.length); var card = array1[index]; array1.splice(index, 1); return card; }; // PER&CRE var object = document.createElement('p'); object.innerHTML = deal(array1); //REND document.getElementById("testDivExeId").appendChild(object); return false; }; </script> </body> </html>array1 se crea cada vez que hace clic en el botón. Debe almacenar array1 de tal manera que conserve su valor actual. Puede declarar array1 en el ámbito global o almacenar la matriz en la memoria del navegador. En realidad, debe quitar la tarjeta de la matriz (le recomiendo que use filter en lugar de splice ). Finalmente, asegúrese de crear un nuevo <p> solo cuando exista al menos una tarjeta.
<script> //TEST1 // RAND AND ARR var array1 = ["Hello", "There", "Some", "Things", "Never", "Change",]; document.getElementById("testClickId").onclick = function testFunc1() { if (array1.length === 0) // Check if exists any card. return; var deal = function () { var index = Math.floor(Math.random() * array1.length); var card = array1[index]; array1 = array1.filter(c => c !== card); // Remove the card return card; }; // PER&CRE var object = document.createElement('p'); object.innerHTML = deal(array1); //REND document.getElementById("testDivExeId").appendChild(object); return false; }; </script>