How to make a condition happens when two buttons are selected in Javascript?

Question

How do I write something in Javascript so one thing happens when two buttons are hit?

For example, I want something like this

<button>A</button>
<button>B</button>
<img id = "pics" src = "/randompicture.gif">

And in JS, I want to be able to make something visible when both button A and B are selected.

If(button A is hit AND button B is hit){
then this happens, 
such as document.getElementById("pics").visibility = "hidden"}

Thank you

PS: Sorry for bad syntax. I'm new to HTML, CSS and JS. Any help is greatly appreciated.

Edit: By "selecting", I mean when both buttons are pressed at least once

Edit 2: Just tried @ Khauri McClain's event listeners suggestion in repl.it. It seems to have worked, I got what I wanted. Here's what I wrote

document.getElementById("buttonWithFirstId").addEventListener("click", function(){
     document.getElementById("buttonWithSecondId").addEventListener("click", function(){
         document.getElementById("imageId").style.visibility = "visible"
     });
});

Edit 3: Wow, there's a lot of ways of doing this, it seems. I'm excited to try these. Thank you for all these different suggestions.

Thank you everyone for your suggestions.

Answer 1

You can use a CSS class that is added/removed to each button to act as a "flag" as to whether or not the button has been clicked. Then, use the Array.every()]1 method (to check that every button has that class).

NOTE: Your code to set the visibility is incorrect. You can't access CSS properties directly from the DOM object, you have to first access the .style property of the DOM object. Usually, it's better to set up a CSS class ahead of time and just apply or remove the class from the element.

So, when you want to access the classes that an element has, you can use the .classList property:

element.classList.add("className")      // adds the class
element.classList.remove("className")   // removes the class
element.classList.contains("className") // returns true/false

This solution will work no matter how many buttons you need to be clicked and I've added some more buttons to show this. I've also added a little additional CSS for a visual indicator.

// Get all related buttons into an array
var btns = Array.prototype.slice.call(document.querySelectorAll(".hit"));
var img = document.getElementById("pics"); // Get reference to image

// Loop over the button array
btns.forEach(function(btn){

  // Set up a click event handler for each button
  btn.addEventListener("click", function() {
    // Add or remove a CSS class that tracks the current "hit" state of the button
    // and creates a visual cue as to its state based on whether the class is already applied.
    this.classList.contains("clicked") ? 
      this.classList.remove("clicked") : this.classList.add("clicked");

    // If all the buttons have the clicked class hide the image otherwise don't
    btns.every((b) => { return b.classList.contains("clicked"); }) ?
      pics.classList.add("hidden") : pics.classList.remove("hidden");      
  });
});

/* These pre-made classes will be applied/removed as necessary. */
.clicked { box-shadow:0 0 5px rgba(255, 0, 0, .5) }
.hidden  { visibility:hidden; }

<button class="hit">A</button>
<button class="hit">B</button>
<button class="hit">C</button>
<button class="hit">D</button>
<img id = "pics" src = "/randompicture.gif" alt="Image Here">

Answer 2

You could track the state of the buttons. Please note that the following implementation allows the user to toggle the state of each button between clicked and not clicked. If you want the button to be considered clicked once the user has clicked independently if the user clicks on the button again just change the line that says state[buttonClicked] = !state[buttonClicked] to state[buttonClicked] = true.

const state = {A: false, B: false};

addEventListener('click', (e) => {
   const buttonClicked = e.target.innerHTML;
   state[buttonClicked] = !state[buttonClicked];
  
   console.log(Object.values(state));
  
   if(Object.values(state).includes(false)) {
     console.log('not all buttons are clicked');
   } else {
     console.log('all buttons are clicked');
     // Do what you got to do here
     document.getElementById("pics").style.visibility = "hidden";
   }
});

<button>A</button>
<button>B</button>
<br/>
<img id = "pics" src ="http://placehold.it/200x200" />

Answer 3

You could keep track of which buttons were selected by adding/removing them from an array. When both buttons are in the array, perform your action.

This will add the button to the array if it isn't in the array. If the button is clicked again and it is in the array it will be removed.

let clicked = []

Array.from(document.querySelectorAll('button')).forEach(btn => {
  btn.addEventListener('click', e => {
    // The clicked button
    let target = e.currentTarget
    // Test if the button is in the array
    let idx = clicked.indexOf(target)
    // If it isn't in the array add it
    if (idx == -1) clicked.push(target)
    // Otherwise remove it
    else clicked.splice(idx, 1)
    
    // Test the length of the array.
    // Note: there might be a more dynamic way to do this
    // however, this is the simplest way.
    if (clicked.length == 2) {
      myAction()
    }
  })
})

function myAction() {
  console.log('both buttons clicked!')
}

<button id="a">A</button>
<button id="b">B</button>

Answer 4

try this function adding :

function clickedbutton(e) {
  /* Check if button has class selected */
  if (e.classList.contains("selected")) {
    e.classList.remove("selected");
    /* removit if clicked twice */
  } else {
    /* Addit if not */
    e.className += " selected";
  }
  /* loop trow all button */
  var btn = document.getElementsByTagName("button");
  var i;
  var check=0;
  for (i = 0; i < btn.length; i++) {
    if (btn[i].classList.contains("selected")) {
      check++;
    } else {
      check--;
    }
  }
  console.log(check);
  /* if the button has the class selected then change pic src */
  if (check == 2) {
    document.getElementById("pics").src = "https://media.gadventures.com/media-server/cache/a4/b7/a4b727085661bdaa6cc94e84fbe21039.jpg";
  } else {
    document.getElementById("pics").src = "http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg";
  }
}

.selected {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

img {
  width: 150px
}
.as-console-wrapper {
    max-height: 50px !important;
}

<button onclick="clickedbutton(this);">A</button>
<button onclick="clickedbutton(this);">B</button>
<img id="pics" src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg">