CODEWITHSUNDEEP
javascriptjqueryaudiogetelementbyid
james
james

Reputation: 109

Compare variables in Javascript

I have a script that takes in the value of input tags on a click event and I need to compare them to see if they are the same value. Iam still learning Javascript and JQuery so I really need to find some help. Here is my code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#swapCard_0").click(function(){

var phpval = document.getElementById('swapCard_0').value;

});

$("#swapCard_1").click(function(){


var phpval = document.getElementById('swapCard_1').value;
});

$("#swapCard_2").click(function(){


var phpval = document.getElementById('swapCard_2').value;
});
$("#swapCard_3").click(function(){


var phpval = document.getElementById('swapCard_3').value;
});
});
</script>

</head>
<body>

<input type="image" id="swapCard_0" src="image/image0.jpg" value="0">
<input type="image" id="swapCard_1" src="image/image1.jpg" value="1">
<input type="image" id="swapCard_2" src="image/image2.jpg" value="0">
<input type="image" id="swapCard_3" src="image/image3.jpg" value="1">
</body>
</html>

So Say a user clicks image 0 and then clicks image 2 which both have the value of 0, how can I compare them in the function then execute more code? I am sure I would need an if statement but I am not sure how to properly test it in my code. I would like to play a sound when the user clicks two different images that have the same value.

Upvotes: 1

Views: 127

Answers (3)

THEtheChad
THEtheChad

Reputation: 2432

I would make several changes. First, I would put a class on all of your cards so that you can target all of them with a single selector. Then I would use the following code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var prev_click;

$(function(){
    $('.swapCard').click(function(){
        var this_click = this.value;

        if(prev_click === this_click){
            playSound();
        }
        else{
            prev_click = this_click;
        }
    });
});
</script>
</head>
<body>
    <input type="image" id="swapCard_0" class="swapCard" src="image/image0.jpg" value="0">
    <input type="image" id="swapCard_1" class="swapCard" src="image/image1.jpg" value="1">
    <input type="image" id="swapCard_2" class="swapCard" src="image/image2.jpg" value="0">
    <input type="image" id="swapCard_3" class="swapCard" src="image/image3.jpg" value="1">
</body>
</html>

This code listens for a click. It then compares the previous click value with the current click value. If they match, it plays a sound. If they don't, it stores the current click value for the next comparison. I think this accomplishes what you're trying to do.

Upvotes: 0

Diomedes Andreou
Diomedes Andreou

Reputation: 385

What i would do if i was you is the following: Pass a class to all images so you can handle them with one click listener. e.g. class: .image

var phpval;

$('.image').on('click', function() {
  if (phpval && phpval === this.value) {
   //play sound here
  } else {
   phpval = this.value; //set php to this value
  }
});

Upvotes: 0

Bibhu
Bibhu

Reputation: 4081

You can have a global variable and set it when user clicks on the first image like this.

            $(document).ready(function(){

            var selectedImageValue;
            $("#swapCard_0").click(function(){            
               CheckValue($(this).val());
            });

            $("#swapCard_1").click(function(){
               CheckValue($(this).val());
            });

            $("#swapCard_2").click(function(){
                CheckValue($(this).val());
            });

            $("#swapCard_3").click(function(){
                CheckValue($(this).val());
            });

            function CheckValue(value)
            {
                if(selectedImageValue != '')
                {
                   selectedImageValue = value;    
                }
                else
                {
                  if(selectedImageValue === value)
                  {
                      //Your logic when image contains the same value
                  }
                }
             }
            });

Upvotes: 1

Related Questions