Random image arrays for Javascript

Question

I'm new with Javascript, and coding in general. I have been trying to create a code that has an array full of images. Then, when a button is clicked, it will generate a number that links in with the array, and then display the image. Furthermore, I want it to then not use that number/image again until all are used up.

For now I am just starting with having an array, randomly generating a number and displaying the image. I have scoured this forum, gone on SEVERAL posts and tried numerous codes. This is the closest I have got to working.

var imagesArray = [
    "1.jpg", "2.jpg", "3.png", "4.png",
    "5.png", "6.jpg", "7.jpg", "8.png"
];

function displayImage() {
    var rand = imagesArray[Math.floor(Math.random() * 8)
    document.canvas.src = imagesArray[rand];
}

With this code, I am getting an "Unexpected token: document" error. I don't even know if the other parts work, they just aren't erroring.

Where am I going wrong?

Just indent with four spaces for code formatting or highlight and use the `{}` button. — tadman, Sep 20 '17 at 23:29
You have an unmatched `[`, any decent IDE should highlight the error for you. — Etheryte, Sep 20 '17 at 23:29
My indenting legit wasn't working. It kept putting me on the tags section. — Zoroark, Sep 20 '17 at 23:29
@nit I'm using Notepad++ and Unity. If I change the ) after the 8 to a ] Unity then says it expects a ) not a ] — Zoroark, Sep 20 '17 at 23:31
@Zoroark You're **missing** the `]`, you haven't misspelled `)` for `]`. — Etheryte, Sep 20 '17 at 23:32
@Nit I've now put that in and now I am getting the errors I had been getting "Unknown Identifier: 'Math'" and "Unknown Identifier: 'Document' Edited code: var rand = imagesArray[Math.floor(Math.random() * 8)]; — Zoroark, Sep 20 '17 at 23:35
To randomly select array elements without repeat, shuffle the array and then access them in order. — Barmar, Sep 20 '17 at 23:39
See [this question](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array). — Etheryte, Sep 20 '17 at 23:52
Okay. Thanks for the whole shuffle stuff. That still doesn't sort this problem out. — Zoroark, Sep 20 '17 at 23:53
@Derek朕會功夫 See comment above " I've now put that in and now I am getting the errors I had been getting "Unknown Identifier: 'Math'" and "Unknown Identifier: 'Document' Edited code: var rand = imagesArray[Math.floor(Math.random() * 8)];" Saying there is other problems doesn't help now, does it? I know there is problems, hence why it isn't working. — Zoroark, Sep 21 '17 at 00:00

score 0 · Answer 1 · answered Sep 21 '17 at 00:23

0

This code satisfies the requirement of cyclic uniqueness.

var imagesArray = [...]; // initial array
var imagesArrayTemp = imagesArray.slice(0); // clone of initial array

function displayImage() {
  var index = Math.floor(Math.random() * imagesArrayTemp.length);
  document.canvas.src = imagesArrayTemp[index];

  imagesArrayTemp.splice(index, 1); // remove just displayed item

  if(!imagesArrayTemp.length) {
    console.log('All images have been displayed');
    imagesArrayTemp = imagesArray.slice(0); // clone again, let's do a cycle
  }
}

answered Sep 21 '17 at 00:23

dhilt

18,707
8
70
85

I am still getting "Unknown identifier" errors for Math, Document and Console. How can I fix this? I copy and pasted your code, took out the comments and changed the ... to my images ( so "1.jpg", "2.jpg" ect) – Zoroark Sep 21 '17 at 16:16
@Zoroark Looks like it's the environment issue. The `document` object is the root node of the HTML document and of course it must not be "unknown" (the same for `Math` and `console` objects). Try to run this code directly in the browser. Or (the best option) try to make a demo with [plunker](https://plnkr.co/) or whatever. – dhilt Sep 21 '17 at 22:59
@Dhilit I found out the issue, but I'm not knowledgeable in code to fix it. I'm coding in JS, but using Unity as my engine. Thus math, document and console aren't actual definitions. I've sorted Math (Mathf) but no idea of the latter two. – Zoroark Sep 22 '17 at 22:19
@Zoroark If you have combat Math object, then throw away `console.log` call and find the correct way of how to display the image in your environment instead of `document.canvas.src` assignment. I believe this part of question is being out of javascript responsibility, this is Unity stuff. I would also update the initial post... – dhilt Sep 22 '17 at 23:12

Random image arrays for Javascript

1 Answers1