Starting out with vanilla JS, so please be patient ;) Time to tackle the tic tac toe game challenge!
This is the structure of my HTML:
<div class="container">
<div class="row">
<div class="cel empty" id="a1">
<p>x</p>
</div>
<div class="cel empty" id="a2">
x
</div>
<div class="cel empty" id="a3">
x
</div>
</div>
<div class="row">
<div class="cel empty" id="b1"> x</div>
<div class="cel empty" id="b2"> x</div>
<div class="cel empty" id="b3"> x</div>
</div>
<div class="row">
<div class="cel empty" id="c1"> x</div>
<div class="cel empty" id="c2"> x</div>
<div class="cel empty" id="c3">x </div>
</div>
</div>
And here's the JS code snippet:
var fieldEmptyElements = document.querySelectorAll('div.cel');//selecting divs with the 'empty' class
window.addEventListener('load', checkHowManyEmpty);//calling the function checkHowManyEmpty on page load
//function to count number of empty elements with class 'empty'
function checkHowManyEmpty(){
for(var i=0, max=fieldEmptyElements.length; i<max; i++){
if(fieldEmptyElements.classList.contains('empty')){
alert('There is one element with the empty class');
}
else{
alert('No element with the empty class');
}
}
}
The goal was to detect if any element has the class 'EMPTY', but I encountered an error: "Uncaught TypeError: Cannot read property 'contains' of undefined at checkHowManyEmpty". Any thoughts on why this might be happening?