Digamos que tenía la siguiente matriz: [x, y, z]
Si quisiera mezclar esa matriz y mostrar cada elemento uno por uno (sin repetir) en cada clic de botón, ¿cómo escribiría esa función con Javascript para completar el párrafo? Además, ¿recomendaría escribir el código en línea o en una hoja separada y luego incrustarlo? Gracias de antemano.
<!doctype html> <html> <head> <link rel="stylesheet" href="styles.css"> <title> Title </title> </head> <body> <script src="javascript.js"></script> <div> <p></p> </div> <div> <button onclick="displayElement()">Start</button> </div> </body> </html>Necesitas una función de reproducción aleatoria (tengo una) y alguna estructura a su alrededor para el clic del botón que revelará la reproducción aleatoria.
var arr = ['x', 'y', 'z'] var button = document.querySelector(".my-button"); var reset = document.querySelector(".my-reset"); var shuffled = shuffle(arr) var index = 0; button.addEventListener('click', function() { if (index < shuffled.length) { console.log(shuffled[index]); index++ } }) reset.addEventListener('click', function() { shuffled = shuffle(arr) index = 0; }) function shuffle(str_or_arr) { var a = typeof str_or_arr == 'string' ? str_or_arr.split('') : str_or_arr var n = a.length; for (var i = n - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = a[i]; a[i] = a[j]; a[j] = tmp; } return typeof str_or_arr == 'string' ? a.join('') : a; } <button class="my-button">next</button> <button class="my-reset">reset</button>