Проверьте, имеет ли элемент класс

Попытка найти способ отображения console.log при нажатии на div. Я пытаюсь сделать простую игру, если вы нажмете на правом поле, вы получите сообщение, которое вы выиграли.Проверьте, имеет ли элемент класс

как сейчас я борюсь с нижней частью моего кода, эта часть, в частности:

function winningBox(){ 
 

 
\t if (boxes.hasClass){ 
 

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

Как получить эту работу? если в поле щелкнул класс «выигрыш», сообщение должно победить console.log. Взгляни, пожалуйста. Кстати мне нужно закончить это на ванильным 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(){ 
 
\t document.addEventListener('click', winningBox); 
 

 

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

 
} 
 
console.log(test(boxes)); 
 

 

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

 
\t if (boxes.hasClass){ 
 

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

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

body { 
 
\t background-color: #bdc3c7; 
 
} 
 

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

 

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

 
}

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

источник

2016-02-25 Lucky500

Вы можете использовать Element.classList.contains функцию, чтобы проверить, если заданное значение класса существует в классе атрибута элемента.

Так утверждение должно выглядеть следующим образом:

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

UPD Как Карл Уилбер заметил в комментариях к моему ответу, boxes это NodeList экземпляр.

Таким образом, вы должны преобразовать его в массив:

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

и вы сможете итерацию над ним:

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

это должно возвращать верно, если хотя бы один из ящиков содержит название класса «выигрыш».

источник

2016-02-25 00:07:07

Да, это дает мне некоторую ошибку ... – Lucky500

Итак, как насчет того, чтобы сообщить нам, что такое сообщение об ошибке? – nnnnnn

не может прочитать 'contains' of undefined – Lucky500

Я предлагаю, чтобы проверить каждый контейнер (не массив, как и в предыдущем ответе):

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]); 
}

загоне с «предупреждениями»: http://codepen.io/VsevolodTS/pen/BKBjpP

источник

2016-02-25 00:59:24 vsevolodts

Я думаю, что вы пытаетесь сделать, это:

//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'); 
     } 
    ); 
}

источник

2016-02-25 01:12:07

Проверьте, имеет ли элемент класс

ответ

Смежные вопросы