Change random selection from Array

Question

I am currently creating a flashcard system that randomly selects a value from an array.

However I would also like for another button "switchBtn" to change the random value that is displayed.

Is there anyway to do this ?

current code:

var kanaArray = ["あ","い","う","え","お","か","き","く","け","こ","さ","し",
"す","せ","そ","た","ち","つ","て","と",
"な","に","ぬ","ね","の","は","ひ","ふ","へ",
"ほ","ま","み","む","め","も","や","ゆ","よ","ら","り","る",
"れ","ろ","わ","を","ん"]

var kanaPassed = []

let kanaShown = kanaArray[Math.floor(Math.random()*kanaArray.length-1)];

//logic

var started = false;


// kana buttons queries
$(document).ready(function(){
    $(".startBtn").click(function(){
        started = true
        $('.startBtn').css("visibility", 'hidden');
        $('.switchBtn').css("visibility", 'visible');
        $('h3').text(kanaShown);
        $('h3').css("visibility",'visible')
        console.log(started)
    })
});

$('.switchBtn').click(function(){

    });

shuffle and pop https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array `const shuffled = shuffle(kanaArray);` and in your code `var item = shuffled.pop(); $('h3').text(item);` — epascarello, Feb 02 '21 at 16:58
@epascarello my reading of the question is that the OP want's to pull out a new single random item from the array when the switch button is clicked, but I could be wrong. — Rory McCrossan, Feb 02 '21 at 17:05
@RoryMcCrossan And that is what the code would do.... (and I did not close it) — epascarello, Feb 02 '21 at 17:39
Sorry! My bad, I noticed the question was closed and scan read your comment. — Rory McCrossan, Feb 02 '21 at 18:00

score 0 · Answer 1 · answered Feb 02 '21 at 17:01

0

You have the logic to retrieve a random kana from the array. All you need to do is place that logic in to a function and call it on both button click events:

var kanaArray = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し",
  "す", "せ", "そ", "た", "ち", "つ", "て", "と",
  "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ",
  "ほ", "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "ら", "り", "る",
  "れ", "ろ", "わ", "を", "ん"
]
let getRandomKana = () => kanaArray[Math.floor(Math.random() * kanaArray.length - 1)];

// kana buttons queries
$(document).ready(function() {
  $(".startBtn").click(function() {
    $('.startBtn').css("visibility", 'hidden');
    $('.switchBtn').css("visibility", 'visible');
    $('h3').text(getRandomKana()).css("visibility", 'visible')
  })

  $('.switchBtn').click(function() {
    $('h3').text(getRandomKana());
  });
});

h3 {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="startBtn">Start</button>
<button class="switchBtn">Switch</button>

<h3></h3>

answered Feb 02 '21 at 17:01

Rory McCrossan

331,213
40
305
339

thank you for your really quick response could I ask what this: "= () =>" is ? I havent come across it in my course im doing – Codechunk Feb 02 '21 at 17:04
It's an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). It's the short form of `function() { return /* code */; });`. Note that it is not supported by IE, though. – Rory McCrossan Feb 02 '21 at 17:06
Hi sorry to bother you again, is there a possiblity if I had two seperate arrays (one in english and one in japanese) to use this code to return the same index value for both? – Codechunk Feb 03 '21 at 09:06
Sure, just use the index to access both, something like `kana = kanaArray[index]; english = englishArray[index];` – Rory McCrossan Feb 03 '21 at 09:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228194/discussion-between-codechunk-and-rory-mccrossan). – Codechunk Feb 03 '21 at 09:09

Change random selection from Array

1 Answers1