Only allowing one action and recording it in javascript

Question

I have a two part problem I am wanting to create a game of rock,paper scissors, that allows the user to play until he loses once against the computer. I will show the user a series of images (rock,paper,scirssors). I will then highlight the choice if the user clicks the image, then double click to confirm their choice to play against.

So I have this in my HTML that is shown after the user clicks play now:

<div id="playOptionsclassic" style="display: none">
    <img id="clickedRock" src="img/rock.jpg" onclick="playClassicWithRock()" dis/>
    <img id="clickedPaper" src="img/paper.jpg" onclick="playClassicWithPaper()"/>
    <img id="clickedScissors" src="img/scissors.jpg" onclick="playClassicWithScissors()" />
</div>

Then in my Jquery file I have:

$(function () {
    $("img").one("click",function() {
        $(this).css('border', "solid 2px red");
    });
});

The problem I have here is the user can click more then one img right now. I want it to toggle the click, so if I click rock first, oh I change my mind I want scissors, unhighlight rock and highlight scissors. Or should i just make so it's one click and it is locked in?

How can I then pass a value of "rock","Paper" Scissors" into a javascript file to see if they beat the computer?

Answer 1

Use $(this).siblings().css('border','0px') for change the colors of the clicked item and use playClassicWithScissors(this) "this" to pass your element to the function

 $(function () { $("img").on("click",function() { $(this).siblings().css('border','0px') $(this).css('border', "solid 2px red"); }); }); function playClassicWithRock(ele){ alert($(ele).attr('id')); } function playClassicWithPaper(ele){ alert($(ele).attr('id')); } function playClassicWithScissors(ele){ alert($(ele).attr('id')); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="playOptionsclassic" style="display: block"> <img id="clickedRock" src="img/rock.jpg" onclick="playClassicWithRock(this)" dis/> <img id="clickedPaper" src="img/paper.jpg" onclick="playClassicWithPaper(this)"/> <img id="clickedScissors" src="img/scissors.jpg" onclick="playClassicWithScissors(this)" /> </div> 

Answer 2

First of all, you should prefer to use classes to individual CSS styles. It is generally easier (and much more robust, maintenance-wise) to add and strip a class, than to adjust the CSS properties.

An easy way to do this is to find a selector that matches all three images; then you can strip the "selected" class from all images (whether they have it or not) before you add it to the clicked image. jQuery makes this very easy.

The other typical way is to store the selection, so you can explicitly deselect that element before selecting a new one.

Answer 3

<div id="playOptionsclassic" style="display: none">
    <img id="clickedRock" src="img/rock.jpg" class="game-opt-img" data-val="rock" dis/>
    <img id="clickedPaper" src="img/paper.jpg" class="game-opt-img" data-val="paper"/>
    <img id="clickedScissors" src="img/scissors.jpg" class="game-opt-img" data-val="scissors" />
</div>

Then in your javascript

$(function(){
    $(".game-opt-img").on("click", function() {
        $(".game-opt-img").off("click"); // remove all image's click event
        var val = $(this).data("val"); // get the value of the image that the user choose.
    });
});

Answer 4

You can create a class in css called .active which adds the border to the image. So, when you click on an image, all you need to do is remove the .active class from all the images, and then add the .active to the image you clicked on.

This can be achieved by doing the following:

 $(function() { $("#playOptionsclassic div").on("click", function() { $("#playOptionsclassic div").removeClass('active'); $(this).addClass('active'); }); }); 

 .active { border: 2px solid red; } /* Styles for example */ #playOptionsclassic div { height: 100px; width: 100px; background: black; color: white; margin: 1%; display: inline-block; text-align: center; box-sizing: border-box; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="playOptionsclassic"> <!-- Images replaced with divs for example --> <div id="clickedRock">Rock img</div> <div id="clickedPaper">Paper img</div> <div id="clickedScissors">Scissors img</div> </div> 

Answer 5

First you can add a predefined class to each of the images and assign them a data attribute for what they represent (rock, paper, scissors) as follows:

<div id="playOptionsclassic" style="display: none">
    <img class="option" src="img/rock.jpg" data-option="rock"/>
    <img class="option" src="img/paper.jpg" data-option="paper"/>
    <img class="option" src="img/scissors.jpg" data-option="scissors"/>
</div>

Then you can create a class in CSS where you will have the style of the clicked image:

.active {
    border: 2px solid red;
}

And in your javascript, when the user single clicks one of the options, remove the active class from the others and add it to that image.

And when they double click, check if an option was selected and perform the necessary actions.

$(function() {
    $("img.option").on("click", function() {
        $("img.option.active").removeClass("active");
        $(this).addClass("active");
    });

    $("img.option").on("dblclick", function() {
        var selectedOption = $("img.option.active");

        // Check if an option was selected.
        if (selectedOption.length) {
            // Save the name of the option (rock, paper or scissors) in a variable.
            var optionName = selectedOption.data("option");

            // Perform your action here.
        } else {
            alert("Please select an option.");
        }
    });
});