Wyświetlaj elementy tablicy, jeden po drugim, jednym kliknięciem przycisku

Question

Jestem nowicjuszem w Javascript i współpracuję z podstawami. Chcę utworzyć tablicę, której poszczególne elementy są losowo rysowane, po jednym na raz, za pomocą kliknięcia przycisku, aż wszystkie elementy tablicy zostaną wyświetlone na ekranie. Kod, który mam, jest prawie na miejscu. Problem polega jednak na tym, że po uruchomieniu zawsze chwyta 2 elementy przy pierwszym kliknięciu przycisku, a nie 1. Działa dobrze dla pozostałych elementów. Na pewno doceniłby pewien wgląd w ten problem. Dziękuję Ci.

var myArray=['1','2','3','4','5','6','7'] 
var text = ""; 
var i; 

function RandomDraw() { 
    for(i = 0; i < myArray.length; i+=text) { 
     var ri = Math.floor(Math.random() * myArray.length); 
     var rs = myArray.splice(ri, 1); 
     document.getElementById("showSplice").innerHTML = text+=rs; 
     //document.getElementById("showArrayList").innerHTML = myArray; 
    } 
} 

Answer 1

chciałbym zrobić to w ten sposób:

let myArray=['1','2','3','4','5','6','7'] 
function RandomDraw(){ 
    const selectedIndex = Math.floor(Math.random() * myArray.length); 
    const selected = myArray[selectedIndex] 
    myArray = myArray.slice(0, selected).concat(myArray.slice(selected + 1)); 
    return selected; 
} 

każdym razem dzwonić RandomDraw zwróci liczbę losową, bez powtarzania.

Answer 2

To "zawsze" rysuje 2 elementy z powodu i+=text. Twoja tablica jest mała, więc pętla wymaga 2 iteracji (łączenia znaków, aby uzyskać numer i), aby przejść przez myArray.length.

First iteration: 
    i = 0 => 0 < myArray.length => true 
    prints number 
Second iteration: (say '4' get choosen) 
    i = i + text and text = '4' => i = "04" => "04" < myArray.length => true 
    prints number 
Third iteration: (say '3' get choosen) 
    i = i + text and text = '43' => i = "0443" => "0443" < myArray.length => false 
    loop breaks 

Istnieje więc możliwość wydrukowania dwóch elementów. W zależności od długości tablicy może być ich więcej.

Nie trzeba pętlę, wystarczy wybrać numer i wydrukować go:

function RandomDraw() { 
    if(myArray.length > 0) {          // if there still elements in the array 
     var ri = Math.floor(Math.random() * myArray.length);  // do your job ... 
     var rs = myArray.splice(ri, 1); 
     document.getElementById("showSplice").textContent = rs; // .textContent is better 
    } 
    else { 
     // print a message indicating that the array is now empty 
    } 
} 

Answer 3

Tak jak ja to rozumiem, chcesz narysować co elementy z tablicy po jednym kliknięciem. Więc pętla jest potrzebna.

Jak mówili inni, istnieje kilka problemów w twojej dla pętli:

• że + = tekst nie ma sensu
• jesteś zapętlenie aż osiągnie długość tablicy, ale jesteś sklejania że tablica, zmniejszając jego długość

można poprawić pętli for:

function RandomDraw() { 
    var length = myArray.length; 
    var ri = 0; 
    for (var i=0;i<length;i++) { 
     ri = Math.floor(Math.random() * myArray.length); 
     console.log("Random index to be drawn : " + ri); 

     // removing that index from the array : 
     myArray.splice(ri, 1); 

     console.log("myArray after a random draw : ", myArray); 
    } 
} 

Lub można użyć pętli while:

function RandomDraw() { 
    var ri = 0; 
    while (myArray.length > 0) { 
     ri = Math.floor(Math.random() * myArray.length); 
     console.log("Random index to be drawn : " + ri); 

     // removing that index from the array : 
     myArray.splice(ri, 1); 

     console.log("myArray after a random draw : ", myArray); 
    } 
} 

Answer 4

Innym rozwiązaniem jest przetasować tablicę, a następnie na każde kliknięcie, pop element ze zdobyciem tablicy.

function shuffle(array) { 
 
    return array.sort(function() { return Math.random() - 0.5; }); 
 
} 
 

 
var button  = document.getElementById('button'); 
 
var origin  = ['1','2','3','4','5','6','7']; 
 
var myArray  = shuffle(origin); 
 
var currentValue = null; 
 

 
button.onclick = function() { 
 
    currentValue = myArray.pop(); 
 

 
    if(!!currentValue) { 
 
    console.log(currentValue); 
 
    } 
 
}

<button id='button'> 
 
get element 
 
</button>

można przetasować tablicę ponownie na każde kliknięcie, ale myślę, że nie ma potrzeby w ogóle ...

Jeśli zastanawiasz się o Math.random() - 0.5:

[...] Math.random zwraca liczbę od 0 do 1. Dlatego jeśli zadzwonisz pod numer Math.random() - 0.5, masz 50% szansy otrzyma liczbę ujemną i 50% szans na otrzymanie liczby dodatniej. Jeśli uruchomisz pętlę for i dodasz te wyniki do tablicy, uzyskasz pełny rozkład liczb ujemnych i dodatnich.

• https://teamtreehouse.com/community/mathrandom05