Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Same Button Remove

    I am trying to remove same button matching pairs using the code below but i am not not successful. As they are two button1 and button3 so if i click the matching pair button 1 and button 1 both should remove with score as 1. i.e., for every succesful pair score is incremented by 1.

    Code:
    <div id="score">Score: 0</div>
    <button id="one" type="button" data-index="0">Button1</button>
    <button id="two" type="button" data-index="0">Button1</button>
    <button id="three" type="button" data-index="1">Button3</button>
    <button id="four" type="button" data-index="1">Button3</button>
    
    <script>
    
    var Score = 0;
        index = 0;
        
    $("#one, #two, #three, #four").click(function () {
        
        var dataIndex = $(this).data('index');
        if (index == dataIndex) {
            Score++;
            $(this).hide();
            if(dataIndex == 1) {
                index = 0;
            } else {
               index++;   
            }
        } 
    
        $("#score").html("Score: " + Score);
    });
    </script>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Did you forget this:
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    ?
    Your code works for me. When ether button1 is click FIRST(button2 does nothing till button1 has executed) it hides.
    Then you have to click button2 to make it hide.
    Then you have to click button1 again and it hides.
    Lastly the remaining button2 will hide.

    Did you want this to operate any other way?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Did you forget this:
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    ?
    Your code works for me. When ether button1 is click FIRST(button2 does nothing till button1 has executed) it hides.
    Then you have to click button2 to make it hide.
    Then you have to click button1 again and it hides.
    Lastly the remaining button2 will hide.

    Did you want this to operate any other way?


    No not like what u said. its just like a matching pair game i am designing. if two are identical then it should vanish. as from my code there are two button1 and button3 that are identical. so if i click button1 and button1, both should vanish since they are identical and same is the case with button3 as well. score increment of 1 is given for every succesful identical pair. hope u understood what i am trying to say. i can give more info if needed.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Made a few changes. Is this what you want?
    Code:
    <div id="score">Score: 0</div>
    <button id="one"   type="button" class="ony">Button1</button>
    <button id="four"  type="button" class="mony">Button3</button>
    <button id="two"   type="button" class="ony">Button1</button>
    <button id="three" type="button" class="mony">Button3</button>
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
    $("#one, #two, #three, #four").click(function () {
    	var myClass = $(this).attr("class");
    	document.getElementsByClassName(myClass)[0].style.visibility='hidden';
    	document.getElementsByClassName(myClass)[1].style.visibility='hidden';
    });
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Jul 2013
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Made a few changes. Is this what you want?
    Code:
    <div id="score">Score: 0</div>
    <button id="one"   type="button" class="ony">Button1</button>
    <button id="four"  type="button" class="mony">Button3</button>
    <button id="two"   type="button" class="ony">Button1</button>
    <button id="three" type="button" class="mony">Button3</button>
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
    $("#one, #two, #three, #four").click(function () {
    	var myClass = $(this).attr("class");
    	document.getElementsByClassName(myClass)[0].style.visibility='hidden';
    	document.getElementsByClassName(myClass)[1].style.visibility='hidden';
    });
    </script>

    90% correct on what u done. well done and great effort. but i want the buttons to hide only when i click same both buttons. from ur code the buttons are hiding with a single click on any same button. hope u understood what i said.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    you just need to add a couple of checks:
    - on the first click, store the variable to be matched
    - on the second click, check if the button clicked has the same variable as the one stored.
    - treat the next click as a first click

    you can distinguish between first and second clicks with the modulus operator

    you may also want to check that the id's are different (to prevent the user just clicking the same button twice)

  • #7
    New Coder
    Join Date
    Jul 2013
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry to say that I can't implement it. I tried and I'm tired. That's the reason I posted for a help

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    If there's always a pair in the set of buttons, I think the code is as simple as this:
    Code:
    var Score = 0;
    $("button[data-index]").on('click', 'function () {
        
        var dataIndex = $(this).data('index');
    
        $('button[data-index=" + dataIndex + "]').hide();
        Score++;
    
        $("#score").html("Score: " + Score);
    });
    But otherwise:

    Code:
    var Score = 0;
    $("button[data-index]").on('click', 'function () {
        
        var dataIndex = $(this).data('index');
    
        var $pair = $('button[data-index=" + dataIndex + "]').not(this);
        if ($pair.length > 0) {
           Score++;
           $pair.hide();
           $(this).hide();
           $("#score").html("Score: " + Score);
        }    
    });

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    If we are trying to mimic the game "memory", I think it would be more along these lines...

    Code:
    <body>
    
    <div id="score">Score: 0</div>
    <button id="one" type="button" data-index="0">Button1</button>
    <button id="two" type="button" data-index="0">Button1</button>
    <button id="three" type="button" data-index="1">Button3</button>
    <button id="four" type="button" data-index="1">Button3</button>
    
    <script>
    var Score = 0;
    var theone;
    var theid;
    var clicks = 0;
    $("button[data-index]").on('click', function () {
        var dataIndex = $(this).data('index');
    
        if (clicks % 2 == 0) {
            theone = dataIndex;
            theid = $(this).attr('id');
        } else {
            if (dataIndex == theone && theid != $(this).attr('id')) {
                $('button[data-index="' + dataIndex + '"]').hide();
                Score++;
            }
        }
        clicks++
        $("#score").html("Score: " + Score);
    });
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    kadi (05-08-2014)

  • #10
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am agree with Kadi. He gives the nice code and solution for your problem. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •