CODEWITHSUNDEEP
javascript
MCC
MCC

Reputation: 542

JavaScript array of images not working

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;
    };
};

Upvotes: 0

Views: 65

Answers (2)

nisar
nisar

Reputation: 1065

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;
                    };
            }

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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

Upvotes: 2

Related Questions