CODEWITHSUNDEEP
javascripthtml
MCC
MCC

Reputation: 542

Javascript checking if image is in the array

I have been trying to simplify some code and I have 4 variables that hold an array of images and finally there is a final one called cards that holds all 4 variables.

The other part of it generates a random image from the cards and changes a canvas in html.

Now what I am trying to do, which is what I need help on, is to use an if statement to see if the image generated is from either one of the 4 variables and if so I want it to change a value to make it obvious that it has worked.

Any ideas on how to accomplish this?

HTML

<button class="open" onclick="pack100()">Open &#163;250 Cards.</button>
<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 = new Array("http://tacticalcards.esy.es/images/a.k.a.bronze.jpg");
var silver = new Array("http://tacticalcards.esy.es/images/ssgsilver.jpg");
var gold = new Array("http://tacticalcards.esy.es/images/a.w.p.gold.jpg");
var legends = new Array("http://tacticalcards.esy.es/images/karambitee.jpg");
var cards = new Array(bronze, silver, gold, legends);
var cash = document.getElementById("cash").innerHTML;
function pack100(){
    if (Number(cash) >= 250){
        var profit = 0;
        cash = cash - 250;
        var c1 = Math.floor(Math.random() * cards.length);
        document.getElementById("cp1").src = cards[c1];
        var cp1 = document.getElementById('cp1').src;
        if (cp1 == gold){
            profit += 50;
            document.getElementById("w1").innerHTML = 500000000000000000000;
            document.getElementById("profit").innerHTML = 500000000000000;
        };

Upvotes: 0

Views: 478

Answers (2)

Pablo Vi&#241;als
Pablo Vi&#241;als

Reputation: 131

I don't understand, It works correctly. Be careful to close the if statement and the function, but it works. To make it obvious that it has changed you can put alert("your message").

One thing tho, instead of using arrays of 1 element, use strings, it's more undertandable.

I wrote an HTML page with this and it works, i just changed cash variable because you didn't gave us the element with id = cash. There are some images with broken links, so it wont show the image. Here it is:

<html>
<header>
    </header>
<body>
<button class="open" onclick="pack100()">Open &#163;250 Cards.</button>
<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>

<script>
var bronze = "http://tacticalcards.esy.es/images/a.k.a.bronze.jpg";
var silver = "http://tacticalcards.esy.es/images/ssgsilver.jpg";
var gold = "http://tacticalcards.esy.es/images/a.w.p.gold.jpg";
var legends = "http://tacticalcards.esy.es/images/karambitee.jpg";
var cards = new Array(bronze, silver, gold, legends);
var cash = 350;
function pack100(){
    alert("works");
    if (Number(cash) >= 250){
        var profit = 0;
        cash = cash - 250;
        var c1 = Math.floor(Math.random() * cards.length);
        document.getElementById("cp1").src = cards[c1];
        var cp1 = document.getElementById('cp1').src;
        if (cp1 == gold){
            alert("gold");
            profit += 50;
            document.getElementById("w1").innerHTML = 500000000000000000000;
            document.getElementById("profit").innerHTML = 500000000000000;
        }
    }
};
</script>
</body>
</html>

Upvotes: 1

user3297291
user3297291

Reputation: 23382

In your cards array there are 4 "card types". If I got your question correctly, you're picking a random type using a random index:

var c1 = Math.floor(Math.random() * cards.length);

c1 now holds a number (in your example, a number between 0 and 3). To check the type that corresponds to this number, you cannot do:

if (c1 == gold) { /* ... */ }

This compares a number to an array. Instead, you'll have to do:

if (cards[c1] === gold) { /* ... */ }

This checks if the array inside cards at index c1 is the same array as the gold array.

Upvotes: 0

Related Questions