Check if element has class [duplicate]

Question

Trying to find a way to display a console.log when a div is clicked. I am trying do do a simple game, if you click on the right box, you will get a message that you won.

as of now I am struggling with the bottom of my code, this part in particular:

function winningBox(){

	if (boxes.hasClass){

		console.log('you win');
	} else {
		console.log('you lose');
	}
}
winningBox();

How do I get this to work? if box clicked has class of 'winning' the message should console.log winning. Please take a look. By the way I need to complete this on Vanilla JavaScript

//cup game
//add three cups to screen
//select li element
var button;
var boxes = document.getElementsByTagName('li');
var array = [];
console.log('working');

document.addEventListener('DOMContentLoaded', init);

function init() {
  document.addEventListener('click', winningBox);


  //shuffle li elements, and ad an id
  function test(boxes) {
    var randomBox = boxes[Math.floor(Math.random() * boxes.length)];
    array.push(randomBox);
    console.log('randombox:', randomBox);
    randomBox.classList.add('winning');

  }
  console.log(test(boxes));


  //user can click on a cup to see if correct
  function winningBox() {

    if (boxes.hasClass) {

      console.log('you win');
    } else {
      console.log('you lose');
    }
  }
  winningBox();

  //if cup is incorrect, display message
  //if correct, display won message
  //button to restart game
}

body {
  background-color: #bdc3c7;
}

.main {
  background-color: #2c3e50;
  width: 300px;
  height: 100px;
}

li {
  background-color: gray;
  width: 80px;
  height: 80px;
  margin: 10px;
  list-style-type: none;
  display: inline-block;
  position: relative;
}

<body>
  <container class="main">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </container>
  <script src="main.js"></script>
</body>

Alex Yatkevich · Accepted Answer · 2016-02-25 01:28:28Z

11

You can use Element.classList.contains function to check if specified class value exists in class attribute of the element.

So assertion should look like:

if (boxes.classList.contains('winning')) {

UPD As Karl Wilbur noticed in the comments to my answer, boxes is a NodeList instance.

So, you have to convert it into array:

var boxes = Array.prototype.slice.apply(document.getElementsByTagName('li'));

and you will be able to iterate over it:

boxes.some(function(el) {
    return el.classList.contains('winning');
});

this should return true if at least one of the boxes contains a class name 'winning'.

edited Feb 25, 2016 at 1:28

answered Feb 25, 2016 at 0:07

Alex Yatkevich

1,46411 silver badges11 bronze badges

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

5 Comments

Lucky500 Over a year ago

yes, it's giving me some type of error....

nnnnnn Over a year ago

So how about telling us exactly what the error message is?

Lucky500 Over a year ago

cannot read 'contains' of undefined

Karl Wilbur Over a year ago

If boxes.classList is undefined then you are likely looking at boxes as an array of elements. You might need to iterate boxes.

Omer Over a year ago

classList.contains('class_name') worked for me :)

vsevolodts · Accepted Answer · 2016-02-25 00:59:24Z

0

I suggest to check each container (not an array as in previous answer):

function checkawinner(box) {
  box.addEventListener("click", function(){
   if (box.classList.contains('winning')) {
        console.log('you win');
    } else {
        console.log('you lose');
   }
  }, false);
}

for (index = 0; index < boxes.length; ++index) {
  checkawinner(boxes[index]);  
}

A pen with "alerts": http://codepen.io/VsevolodTS/pen/BKBjpP

answered Feb 25, 2016 at 0:59

vsevolodts

1568 bronze badges

Comments

Karl Wilbur · Accepted Answer · 2016-02-25 01:12:07Z

I think what you are trying to do is:

//user can click on a cup to see if correct
function winningBox(){
    // ensure that we are not working against a cached list of elements
    var boxes = document.getElementsByTagName('li');
    for(i=0,len=boxes.length;i<len;i++) {
        var box = boxes[i];
        if (box.classList.contains('winning')){
            console.log('you win');
        } else {
            console.log('you lose');
        }
    );
}

Collectives™ on Stack Overflow

Check if element has class [duplicate]

3 Answers 3

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Linked

Related