JavaScript array of images not working

Question

I am looking for some help for my website. I am using arrays to hold different categories for my images but when I load my website it doesn't show the images it comes up with the broken link. How can I fix this? The website http://tacticalcards.esy.es/

HTML

            <button class="open" onclick="pack100()">Open &#163;250 Cards.</button>
            <br />
            <div class=card-group>
                <img class="card" src="http://tacticalcards.esy.es/images/blank.png" id="cp1" />
                <p>Worth: &#163;<span id="w1">0</span></p>
            </div>

JAVASCRIPT

var bronze = "http://tacticalcards.esy.es/images/a.k.a.bronze.jpg";
var silver = new Array("http://tacticalcards.esy.es/images/ssgsilver.jpg","http://tacticalcards.esy.es/images/tacticalknife.silver.jpg","http://tacticalcards.esy.es/images/clockpistol.silver.jpg");
var gold = new Array("http://tacticalcards.esy.es/images/a.w.p.gold.jpg","http://tacticalcards.esy.es/images/m4ai-s.gold.jpg");
var legends = "http://tacticalcards.esy.es/images/karambitee.jpg";
var cards = new Array(bronze, silver, gold, legends);
function pack100(){
var c1 = Math.floor(Math.random() * cards.length);
document.getElementById("cp1").src = cards[c1];
var cp1 = document.getElementById('cp1').src;
if (cp1 == bronze){
        profit += 25;
        document.getElementById("w1").innerHTML = 25;
        document.getElementById("profit").innerHTML = profit;
    };
    if (cp1  silver){
        profit +=50 ;
        document.getElementById("w1").innerHTML = 50;
        document.getElementById("profit").innerHTML = profit;
    };
    if (cp1 == gold){
        profit += 100;
        document.getElementById("w1").innerHTML = 100;
        document.getElementById("profit").innerHTML = profit;
    };
    if (cp1 == legends){
        profit += 250;
        document.getElementById("w1").innerHTML = 250;
        document.getElementById("profit").innerHTML = profit;
    };
};

Use object instead of array which could be differentiated using key — Rayon
– Rayon, Commented May 5, 2016 at 5:42
What are your trying to achieve here ? You are assigning an array to the src attribute of an image. — Golak Sarangi
– Golak Sarangi, Commented May 5, 2016 at 5:51

Rayon · Accepted Answer · 2016-05-05 05:58:10Z

Keep an array of objects and each object will have a key to differentiate the source. Also note that you need to find 2 random numbers, first one to get the random object and second one is to find random-index from source array. As we are dealing with the indexes of array, you must have all the image sources in array.

var bronze = ["http://tacticalcards.esy.es/images/a.k.a.bronze.jpg"];
var silver = ["http://tacticalcards.esy.es/images/ssgsilver.jpg", "http://tacticalcards.esy.es/images/tacticalknife.silver.jpg", "http://tacticalcards.esy.es/images/clockpistol.silver.jpg"];
var gold = ["http://tacticalcards.esy.es/images/a.w.p.gold.jpg", "http://tacticalcards.esy.es/images/m4ai-s.gold.jpg"];
var legends = ["http://tacticalcards.esy.es/images/karambitee.jpg"];

var cards = [{
  key: 'bronze',
  data: bronze
}, {
  key: 'silver',
  data: silver
}, {
  key: 'gold',
  data: gold
}, {
  key: 'legends',
  data: legends
}];

function pack100() {
  var profit = 0;
  var c1 = Math.floor(Math.random() * cards.length);
  var rand = Math.floor(Math.random() * cards[c1].data.length);
  document.getElementById("cp1").src = cards[c1].data[rand];
  var cp1 = cards[c1].key;
  if (cp1 == 'bronze') {
    profit += 25;
    document.getElementById("w1").innerHTML = 25;
    document.getElementById("profit").innerHTML = profit;
  };
  if (cp1 == 'silver') {
    profit += 50;
    document.getElementById("w1").innerHTML = 50;
    document.getElementById("profit").innerHTML = profit;
  };
  if (cp1 == 'gold') {
    profit += 100;
    document.getElementById("w1").innerHTML = 100;
    document.getElementById("profit").innerHTML = profit;
  };
  if (cp1 == 'legends') {
    profit += 250;
    document.getElementById("w1").innerHTML = 250;
    document.getElementById("profit").innerHTML = profit;
  };
};

<button class="open" onclick="pack100()">Open &#163;250 Cards.</button>
<br />
<div class=card-group>
  <img class="card" src="http://tacticalcards.esy.es/images/blank.png" id="cp1" />
  <p>Worth: &#163;<span id="w1">0</span>
  </p>
  <div id="profit"></div>
</div>

Fiddle Demo

you have very good programming skill, I too tried but It takes so long time to think.. short and good answer for +1

nisar · Accepted Answer · 2016-05-05 06:32:18Z

you ve to use two dimensional array with random, before that you have to find the length of the two dimensional array. and set it into the another array to get random 2d array. Ex[0][1] or [1][0] or p[3][1], also you have to convert all these into proper 2d array
I tried and get succeed.

var bronze =new Array( "http://tacticalcards.esy.es/images/a.k.a.bronze.jpg");
                var silver = new Array("http://tacticalcards.esy.es/images/ssgsilver.jpg","http://tacticalcards.esy.es/images/tacticalknife.silver.jpg","http://tacticalcards.esy.es/images/clockpistol.silver.jpg");
                var gold = new Array("http://tacticalcards.esy.es/images/a.w.p.gold.jpg","http://tacticalcards.esy.es/images/m4ai-s.gold.jpg");
                var legends = new Array("http://tacticalcards.esy.es/images/karambitee.jpg");
                var cards = new Array(bronze, silver, gold, legends);

                var arraycount=[cards[0].length,cards[1].length,cards[2].length,cards[3].length]
                function pack100(){
                var array0=Math.floor(Math.random() *arraycount.length) ;
                var c1 = Math.floor(Math.random() * arraycount[array0]);
                document.getElementById("cp1").src = cards[array0][c1];

                var cp1 = document.getElementById('cp1').src;
                if (cp1 == bronze){
                        profit += 25;
                        document.getElementById("w1").innerHTML = 25;
                        document.getElementById("profit").innerHTML = profit;
                    };
                    if (cp1==silver){
                        profit +=50 ;
                        document.getElementById("w1").innerHTML = 50;
                        document.getElementById("profit").innerHTML = profit;
                    };
                    if (cp1 == gold){
                        profit += 100;
                        document.getElementById("w1").innerHTML = 100;
                        document.getElementById("profit").innerHTML = profit;
                    };
                    if (cp1 == legends){
                        profit += 250;
                        document.getElementById("w1").innerHTML = 250;
                        document.getElementById("profit").innerHTML = profit;
                    };
            }

Collectives™ on Stack Overflow

JavaScript array of images not working

2 Answers 2

Fiddle Demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related