CODEWITHSUNDEEP
javascripthtmlcssfunctionbutton
m.burgess.codes
m.burgess.codes

Reputation: 11

How can I build a function that would look for 2 certain buttons being clicked?

Salutations,

I am learning to code through some online resources and my brother who works in the field in an effort to get into a development career. Right now I am working on a silly web app where you are matching photos. Below each photo is a button with a unique ID. Currently, when you select a button, it will turn blue.

I am trying to create a function that will look for 2 specific buttons being clicked.

If I were to speak what I want it to do in a conversation with you, I would say "if button1 is select when button4 is selected, do this thing"

What function am I looking for?

Can anyone help this n00b out?

Below I have the function as is for when a button is clicked. The class changes in order to adjust the color.

I can post whatever code is necessary, otherwise this is all I could think to post. {BC1b is a button that should be paired with F1b}


  function sbtnb1() {
        document.getElementById("BC1b").className = "selected";
    }

Upvotes: 0

Views: 66

Answers (3)

shaneburgess
shaneburgess

Reputation: 15882

Here is an example.

https://jsfiddle.net/273rhzyw/

With Jquery https://jsfiddle.net/agoLcuv8/8/

   // All buttons with class of button
const buttons = document.querySelectorAll(".button");

// declare array to keep the match checks
let matchCheckerArray = [];

// Loop through each button and attach an onClick
buttons.forEach(function(button) {
  button.onclick = function() {
    clickHandler(button);
  }
});

const clickHandler = function(button) {
  matchCheckerArray.push(button.dataset.matchId)
  console.log(matchCheckerArray);
  if (matchCheckerArray.length == 2) {
    if (isMatch()) {
      alert('Match');
    }
    matchCheckerArray = [];
    return;
  }
}

const isMatch = function() {
  if (matchCheckerArray[0] === matchCheckerArray[1]) {
    return true;
  }

  return false;
}

Upvotes: 1

Icewine
Icewine

Reputation: 1851

There are many ways to do this but this is how I would go about it.

$(".checkButton").on("click", function(){

  // toggle button state
  if($(this).attr("data-state") == "on") {
    $(this).attr("data-state", "off");  // toggle button off
    $(this).removeClass("highlight"); // remove highlight
    $(".myImage").removeClass("highlight"); // remove highlight
  } else {
    $(this).attr("data-state", "on"); // make button active
    $(this).addClass("highlight"); // add highlight
  }
  
  //----------------------------------------------------------
  // Here you would have to build your checks and how you want
  // the comparison of buttons and images to be linked.
  //----------------------------------------------------------
  // For example:
  // check if more than 2 buttons are active and if buttons match the if statement.
  var buttonCount = 0;
  
  $("#buttonContainer button").each(function(){    
    if($(this).attr("data-state") == "on"){
      buttonCount += 1;
    }    
  });
  
  
  // if 2 buttons are clicked then check then allow to do something
  if(buttonCount == 2){
    
    // highlight image 1 if buttons 1 and 2 are on.  
    if($(".checkButton[data-id=b1]").attr("data-state") == "on" &&
       $(".checkButton[data-id=b2]").attr("data-state") == "on"){        
        $("#image1").addClass("highlight");       
    }
    
      // highlight image 2 if buttons 3 and 4 are on.  
    if($(".checkButton[data-id=b3]").attr("data-state") == "on" &&
       $(".checkButton[data-id=b4]").attr("data-state") == "on"){        
        $("#image2").addClass("highlight");       
    }
    
  }
  
  //----------------------------------------------------------
  
});
.myImage {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: black;
  float: left;
}

.highlight {
  outline: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 100%; height: 110px;">
  <div class="myImage" id="image1"></div>
  <div class="myImage" id="image2"></div>
</div>

<div id="buttonContainer" style="width: 100%;">
  <button class='checkButton' data-id="b1" data-state='off'>button 1</button>
  <button class='checkButton' data-id="b2" data-state='off'>button 2</button>
  <button class='checkButton' data-id="b3" data-state='off'>button 3</button>
  <button class='checkButton' data-id="b4" data-state='off'>button 4</button>
</div>

Upvotes: 0

Timothy Chen
Timothy Chen

Reputation: 374

I would keep two global variables (or an array/set of variables) that store what's been clicked. You can manipulate these however you'd like (e.g. clear out the selection if the user selected two photos that aren't a match; don't let the user select a second card if it doesn't match; etc...).

This can work in conjunction with what you already have. The class name will allow you to add specific selected styling, while the global variables allow you to keep track of what has been selected. The global variables will also allow you to check for match or no match.

Upvotes: 0

Related Questions