CODEWITHSUNDEEP
javascripthtml
Kurt Schoenhoft
Kurt Schoenhoft

Reputation: 1

Matching innerHTML Contents using javascript

I am making a card matching game. I have it set up to change bg color to green when I click on the box. How do I have it check the contents of the second card (Which will also turn green) and if they are a match, make them invisible?

        <style type="text/css">
        .box {
                background-color: black;
                width: 100px;
                height: 100px;
                margin: 10px;
                line-height: 100px;
                color:white;
                font-size: 48;
                font-family: helvetica;
                text-align: center;
                display: inline-block;
             }
    </style>
</head>
<body>
    <div class="box">Bacon</div>
    <div class="box">Waffle</div>
    <div class="box">Toast</div> <br>

    <div class="box">Coffee</div>
    <div class="box">Eggs</div>
    <div class="box">Oatmeal</div> <br>

    <div class="box">Eggs</div>
    <div class="box">Toast</div>
    <div class="box">pancakes</div><br>

    <div class="box">Waffle</div>
    <div class="box">Oatmeal</div>
    <div class="box">Bacon</div><br>


    <script type="text/javascript">   
       var boxes = document.getElementsByClassName('box');
            for (var i=0; i< boxes.length; i++){
                boxes[i].style.backgroundColor = "black";
            }
           boxes[0].onclick = function(){
                boxes[0].style.backgroundColor = "green";    
           }
       boxes[1].onclick = function(){
                boxes[1].style.backgroundColor = "green";
           }
           boxes[2].onclick = function(){
                boxes[2].style.backgroundColor = "green";
           }
            boxes[3].onclick = function(){
                boxes[3].style.backgroundColor = "green";
           }
            boxes[4].onclick = function(){
                boxes[4].style.backgroundColor = "green";
           }
            boxes[5].onclick = function(){
                boxes[5].style.backgroundColor = "green";
           }
            boxes[6].onclick = function(){
                boxes[6].style.backgroundColor = "green";
           }
            boxes[7].onclick = function(){
                boxes[7].style.backgroundColor = "green";
           }
           boxes[8].onclick = function(){
                boxes[8].style.backgroundColor = "green";
           }
            boxes[9].onclick = function(){
                boxes[9].style.backgroundColor = "green";
           }
            boxes[10].onclick = function(){
                boxes[10].style.backgroundColor = "green";
           }
            boxes[11].onclick = function(){
                boxes[11].style.backgroundColor = "green";
           }

Upvotes: 0

Views: 96

Answers (3)

Ayan
Ayan

Reputation: 2380

No jquery, Just pure JS

First we iterate and

  • boxes[i].style.backgroundColor = "black"; Assign the bg color to black.
  • boxes[i].onclick = clickFN; and attach a callback function.

Callback FN

function clickFN() {
  var elem = this,
    style = elem.style;
  if (lastClickedElem && elem === lastClickedElem) {
    style.visibility = 'hidden';
  }
  style.backgroundColor = "green";
  lastClickedElem = elem;
}

First this gives the reference to the interacted element.

  • Check if any lastClickedElem exists or not.lastClickedElem && elem === lastClickedElem
  • If exists, and its the same element hide it.style.visibility = 'hidden';
  • Sets the bg color to green.
  • Update the lastClickedElem variable.

var boxes = document.getElementsByClassName('box'),
  lastClickedElem;
for (var i = 0; i < boxes.length; i++) {
  boxes[i].style.backgroundColor = "black";
  // attach the callback for the click interaction.
  boxes[i].onclick = clickFN;
}
// callback function for the click event.
function clickFN() {
  var elem = this,
    style = elem.style;
  if (lastClickedElem && elem === lastClickedElem) {
    style.visibility = 'hidden';
  }
  style.backgroundColor = "green";
  lastClickedElem = elem;
}
.box {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-size: 48;
  font-family: helvetica;
  text-align: center;
  display: inline-block;
}
<div class="box">Bacon</div>
<div class="box">Waffle</div>
<div class="box">Toast</div>
<br>

<div class="box">Coffee</div>
<div class="box">Eggs</div>
<div class="box">Oatmeal</div>
<br>

<div class="box">Eggs</div>
<div class="box">Toast</div>
<div class="box">pancakes</div>
<br>

<div class="box">Waffle</div>
<div class="box">Oatmeal</div>
<div class="box">Bacon</div>
<br>

Upvotes: 1

R. Foubert
R. Foubert

Reputation: 653

Try something like that :

var boxes = document.getElementsByClassName('box');

// remeber the last box clicked
var _lastClicked = null;

for (var i=0; i< boxes.length; i++){
  boxes[i].style.backgroundColor = "black";
  boxes[i].addEventListener('click', onBox_click);
}

function onBox_click(domEvent){
  // clicked element
  var clicked = domEvent.target;
  
  // prevent clicking on the same element
  if (_lastClicked && _lastClicked === clicked)
    return;
  
  // if there is a box clicked and if the value match
  if (_lastClicked && clicked.innerHTML === _lastClicked.innerHTML){
    // the two boxes should disappear and we reset last clicked
    _lastClicked.style.opacity = 0;
    clicked.style.opacity = 0;
    _lastClicked = null;
  }
  
  // if there is a box clicked and if the value does not match 
  if (_lastClicked && clicked.innerHTML !== _lastClicked.innerHTML){
    // reset the color of the last clicked to black
    _lastClicked.style.backgroundColor = "black";
  }
  
  _lastClicked = clicked;
  clicked.style.backgroundColor = "green";
}
.box {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color:white;
  font-size: 48;
  font-family: helvetica;
  text-align: center;
  display: inline-block;
}
<div class="box">Bacon</div>
<div class="box">Waffle</div>
<div class="box">Toast</div> <br>

<div class="box">Coffee</div>
<div class="box">Eggs</div>
<div class="box">Oatmeal</div> <br>

<div class="box">Eggs</div>
<div class="box">Toast</div>
<div class="box">pancakes</div><br>

<div class="box">Waffle</div>
<div class="box">Oatmeal</div>
<div class="box">Bacon</div><br>

I get rid of all your useless lines of code to listen clicks on the boxes. It's now easier to use.

Basically I just remember in the _lastClicked variable the last boxes clicked and I compare it to the new box clicked. If it matches I make them disappear and I reset the _lastClicked variable. If it does not match I reset the _lastClicked's background color to black.

I hope it helps ;)

PS: I also make sure the element clicked is not the same as before. If you don't do that, clicking twice on the same element will make it disappear :p

Upvotes: 1

dmoo
dmoo

Reputation: 1529

This seemed fun, I came up with this to get you started. You still have some logic to figure out, I always store the last one clicked, where I imagine you want to reset on wrong selection.

Also, I used jquery for ease.

var boxes = document.getElementsByClassName('box');
            for (var i=0; i< boxes.length; i++){
                boxes[i].style.backgroundColor = "black";
            }
           boxes[0].onclick = function(){
                boxes[0].style.backgroundColor = "green";    
           }
       boxes[1].onclick = function(){
                boxes[1].style.backgroundColor = "green";
           }
           boxes[2].onclick = function(){
                boxes[2].style.backgroundColor = "green";
           }
            boxes[3].onclick = function(){
                boxes[3].style.backgroundColor = "green";
           }
            boxes[4].onclick = function(){
                boxes[4].style.backgroundColor = "green";
           }
            boxes[5].onclick = function(){
                boxes[5].style.backgroundColor = "green";
           }
            boxes[6].onclick = function(){
                boxes[6].style.backgroundColor = "green";
           }
            boxes[7].onclick = function(){
                boxes[7].style.backgroundColor = "green";
           }
           boxes[8].onclick = function(){
                boxes[8].style.backgroundColor = "green";
           }
            boxes[9].onclick = function(){
                boxes[9].style.backgroundColor = "green";
           }
            boxes[10].onclick = function(){
                boxes[10].style.backgroundColor = "green";
           }
            boxes[11].onclick = function(){
                boxes[11].style.backgroundColor = "green";
           }
          
var lastSelected;
$('.box').click(function(){
   if(lastSelected && $(lastSelected).text() === $(this).text()){
     console.log('Match')
     $(lastSelected).addClass('hidden');
     $(this).addClass('hidden');
   }
  lastSelected = $(this);
});
.box {
                background-color: black;
                width: 100px;
                height: 100px;
                margin: 10px;
                line-height: 100px;
                color:white;
                font-size: 48;
                font-family: helvetica;
                text-align: center;
                display: inline-block;
             }

.hidden{
      visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Bacon</div>
    <div class="box">Waffle</div>
    <div class="box">Toast</div> <br>

    <div class="box">Coffee</div>
    <div class="box">Eggs</div>
    <div class="box">Oatmeal</div> <br>

    <div class="box">Eggs</div>
    <div class="box">Toast</div>
    <div class="box">pancakes</div><br>

    <div class="box">Waffle</div>
    <div class="box">Oatmeal</div>
    <div class="box">Bacon</div><br>

Upvotes: 0

Related Questions