CODEWITHSUNDEEP
javascriptjquery
unscope
unscope

Reputation: 27

Check if 2 images are the same

I'm looking for a way, where i can check if the image that is selected from my math.random is the same as the image my user has selected. The image the user has selected will have a style="solid 3px #587388" So i'm looking for a way to check if my image with style="solid 3px #587388" is the same as the #winner img. And if they are the same it should alert() Won, else lose. How can I do that?

Here is my javascript/jquery code:

function changeCoinBorder(obj) {
    var tCoin = document.getElementById('tCoin');
    var ctCoin = document.getElementById('ctCoin');
    tCoin.style.border = 'none';
    ctCoin.style.border = 'none';
    obj.style.border = 'solid 3px #587388';
}
var counter = 5;

setInterval(function () {
 counter--;
                if (counter >= 0) {
                    span = document.getElementById("count");
                    span.innerHTML = counter;
                }
                // Display 'counter' wherever you want to display it.
                if (counter === 0) {

                    var image = new Array();
                    image[0] = "/Content/img/ct.png";
                    image[1] = "/Content/img/teroist.png";
                    var size = image.length
                    var x = Math.floor(size * Math.random())

                    $('#winner').fadeIn().attr('src', image[x]);
                    $('#winner').addClass("WinImage");

And here is the html:

<div class="row center">
    <div class="col-sm-5">
        <a href="#">
            <img id="ctCoin" onclick="changeCoinBorder(this);" class="img-circle CoinImages" src="~/Content/img/ct.png" />
        </a>
    </div>
    <div class="col-sm-2">
        <img id="winner" />
    </div>
    <div class="col-sm-5">
        <a href="#">
            <img id="tCoin" onclick="changeCoinBorder(this);" class="img-circle CoinImages" src="~/Content/img/teroist.png" />
        </a>
    </div>

Upvotes: 2

Views: 727

Answers (1)

Loksly
Loksly

Reputation: 124

js:

function changeCoinBorder(obj) {

    $('.CoinImages').removeClass('selected');
    $(obj).addClass('selected');
}

function randomImg(){
    var imgs = $('.CoinImages');
    var randomOne = Math.floor(imgs.length * Math.random());
    $('#winner').fadeIn().attr('src', $(imgs[randomOne]).attr('src') );
    $('#winner').addClass("WinImage");
    if ($('#winner').attr('src') === $('.selected').attr('src')){
        alert('You win!');
    }
}

css:

.selected {border: solid 3px #587388;}

Check this: https://jsfiddle.net/28mgqqk1/1/

Upvotes: 1

Related Questions