I have a class and if it exists, I want to use the variable as a true/false if statement.
HTML
<div id="snake" class="snake--mobile">
JS
var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion !== null)
alert('xx');
However, it’s not working. Any ideas? No jQuery answers, please.
getElementsByClassName returns a NodeList which is an array-like object. You can check its length to determine if elements with defined class exist:
var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion.length > 0) {
// elements with class "snake--mobile" exist
}
Cannot read properties of undefined (reading 'length'Here is very sample solution for check class (hasClass) in Javascript:
const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
// do something if 'hasClass' is exist.
}
if( document.getElementById("MyElement").classList.contains('special-class') ) { console.log('Found!') }querySelector solved the problem now I got null if the class isn't existing.getElementsByClassName returns a NodeList. It will never be null. It might have a .length of 0.
getElementsByClassName doesn't return null and [0] is undefined because it has a length of 0 … just like this answer says.I have tested it. its completely working . you might done any other mistake. getElementsByClassName return empty if no element found with given class name or return list of elements that have given class. so you can access it using index.
var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion.length > 0) {
isMobileVersion[0].style.color="red";
alert('class exist');
}<div id="snake" class="snake--mobile">Class Exist div </div>
getElementsByClassName never returns null. In your example you check the result for being not null, which will always be true, as NodeList object is not falsy. Try checking against "class not exist" and you will see.
if (x) will still check for true value. The only way to assess if elements exist is to compare length property with 0, as was described in the other answers.querySelector() method from document returns the first Element that matches the specified selector otherwise returns null if there is no match query selector reference.
Syntax
element = document.querySelector(selectors);
console.log(`existing-class element ${document.querySelector('.existing-class')}`)
console.log(`non-existing-class element ${document.querySelector('.non-existing-class')}`)
if(document.querySelector('.existing-class')) {
alert('inside if block')
}<div class="existing-class">explicit null check with if statement is not required, since null is a falsey value when encountered in a boolean context, using the output of querySelector will work falsey reference
var id=$("#main .slides .gallery-cell.is-selected").attr('id');
var isselected = document.getElementById(id);
isselected.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
