0

I am trying to write something that takes the array "words", shuffles it, and then inserts the different items from that shuffled array into my cards. The shuffling works fine but I get a "TypeError: cards[i] is undefined" when trying to run it. The array I'll use in the end contains 187 items, I have removed most of them from it to make the code shorter to post here.

Thanks in advance :)

jsfiddle: https://jsfiddle.net/storm273/1a4p2xLg/1/

the sketch.js:

var seed = 1;
var cards = document.getElementsByClassName('card');
console.log('cards', cards);

function shuffle(array, seed) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    seed = seed || 1;
    var random = function () {
        var x = Math.sin(seed++) * 10000;
        return x - Math.floor(x);
    };
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(random() * currentIndex);
        currentIndex -= 1;
        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

shuffle(words, seed);
console.log('words', words);

for (i = 0; i < 25; i++) {
    console.log("loop");
    cards[i].innerHTML = words[i];
}

the index.html:

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Codenames</title>

    <link rel="stylesheet" href="styles.css" />
    <script src="sketch.js"></script>
    <script src="bundle.js"></script>
</head>

<body>
    <div class="game">
        <div class="board">
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
            <div class="card">Word</div>
        </div>
    </div>
</body>

</html>```
Yannic Fréson
  • 11
  • 2
  • Your code should work fine. Please add a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [jsfiddle](https://jsfiddle.net/) or [snippet](https://meta.stackoverflow.com/a/356679/1823841) here. – palaѕн Apr 03 '20 at 15:23
  • Your script is evaluated and executed before the "cards" in the DOM are available, hence `cards` is an empty collection (which would be obvious if you would use its `.length` property instead of the fixed value `25`). – Andreas Apr 03 '20 at 15:27
  • okay so when I made the jsfiddle (added to post), it does work there, but not in my browser (firefox dev edition) – Yannic Fréson Apr 03 '20 at 15:33
  • Just check the source of the fiddle. Your script (the JS part) is located right before the closing `

    ` tag. There the "cards" are already parsed by the browser and therefor available in your script.

     – Andreas Apr 03 '20 at 15:37
  • this question is closed ? I have an answer, the document is not fully rendered, move the ` – Dickens A S Apr 03 '20 at 15:37
  • @DickensAS That made it work! Thank you :) – Yannic Fréson Apr 03 '20 at 16:07
  • That's one of the different ways to fix your problem and which is mentioned in the dupe target. Just follow the link at the top. – Andreas Apr 03 '20 at 17:08
  • great, but honestly you need to learn jQuery and start using, or similar frameworks like underscore or prototype etc.., – Dickens A S Apr 03 '20 at 17:17
  • @DickensAS I only started studying IT in february, I'm sure we'll learn those things in the future :) – Yannic Fréson Apr 06 '20 at 14:27

0 Answers0