JQuery. Facing problems with click events

Question

I was writing code for image flip game in jquery but I am facing some problems with the click events on image in the beginning. The problems are when I click one image and click again the same image it works fine but if I click one image, the image src attribute is added to the img tag and then if I click any other image the src attribute is not added to that one for the first click because the clickCounter has the value 1 then. I employed my own logic (clickCounter). I am new to jquery. You may suggest a better way to do this. Thanks in advance. Here is my code.

    <style>
        #main{
            height: 500px;
            border: 1px solid blue;
            margin: auto;
        }
        .myimg{
            width: 100px;
            height: 100px;
            background: lightblue;
            background-position: center center;
            margin: 10px;
            float: left;
            border-radius: 20px;
        }
    </style>

<body>
    <div id="main">

    </div>
    <button id="add">Add</button>

    <script src="jquery-1.11.2.js"></script>
    <script>
        var clickCounter = 0;
        $('#add').click(function(){
            addElements(44);
            $('#add').attr('disabled', 'true');
        });
        function addElements(times){
            var main = $('#main');
            for(j = 1; j <= times; j++){
                var i = document.createElement('img');
                var img = $(i);
                img.click(function(){
                    // $(this).css('background', 'url(back.png)');
                    var myImage = $(this);
                    if(clickCounter == 0){
                        myImage.attr('src', 'back.png');
                        myImage.attr('width', '100');
                        myImage.attr('height', '100');
                        clickCounter = 1;
                    }else{
                        myImage.removeAttr('src');
                        clickCounter = 0;
                    }
                    //alert(clickCounter);
                });
                img.addClass('myimg');
                main.append(img);   
            }       
        }

    </script>
</body>

JSFiddle

posting this code in an interactive, testable jsfiddle and giving us a link to it would help us answer the question more quickly — markasoftware
– markasoftware, Commented Mar 11, 2015 at 3:20
What is the purpose of clickCounter? What exactly do you want to happen on the click events? — Dave
– Dave, Commented Mar 11, 2015 at 3:23
You should use .toggle() to fix second click, checks some examples here — leotesta
– leotesta, Commented Mar 11, 2015 at 3:31

Arun P Johny · Accepted Answer · 2015-03-11 03:35:36Z

2

The problem is the shared variable clickCounter which is shared between all the elements.

In this case since you have dynamic elements, you could use event delegation and then use the current src value of the img to set the new one like

$('#add').click(function () {
    addElements(44);
    $('#add').prop('disabled', true);
});

$('#main').on('click', '.myimg', function () {
    $(this).attr('src', function (i, src) {
        return src == 'back.png' ? '' : 'back.png';
    }).height(100).width(100);
})

function addElements(times) {
    var $main = $('#main');
    for (j = 1; j <= times; j++) {
        $('<img />', {
            'class': 'myimg'
        }).appendTo($main)
    }
}

Demo: Fiddle

edited Mar 11, 2015 at 3:35

answered Mar 11, 2015 at 3:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hanzallah Afgan Over a year ago

Bundles of Thanks. Good

Vim · Accepted Answer · 2015-03-11 03:26:20Z

Instead of counter, check for 'src' attribute as shown below,

        $('#add').click(function(){
            addElements(44);
            $('#add').attr('disabled', 'true');
        });
        function addElements(times){
            var main = $('#main');
            for(j = 1; j <= times; j++){
                var i = document.createElement('img');
                var img = $(i);
                img.click(function(){
                    // $(this).css('background', 'url(back.png)');
                    var myImage = $(this);
                  var attr = $(this).attr('src');
                    if(typeof attr == typeof undefined){
                        myImage.attr('src', 'back.png');
                        myImage.attr('width', '100');
                        myImage.attr('height', '100');                          
                    }else{
                        myImage.removeAttr('src');
                        
                    }
                    //alert(clickCounter);
                });
                img.addClass('myimg');
                main.append(img);   
            }       
        }

#main{
            height: 500px;
            border: 1px solid blue;
            margin: auto;
        }
        .myimg{
            width: 100px;
            height: 100px;
            background: lightblue;
            background-position: center center;
            margin: 10px;
            float: left;
            border-radius: 20px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">

    </div>
    <button id="add">Add</button>

@Arun P Johny What logic should be used to take one image source two times only randomly but not more than two times of the same image.

Collectives™ on Stack Overflow

JQuery. Facing problems with click events

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related