HTML Code
<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled">
I have checked : https://www.w3schools.com/js/js_htmldom_elements.asp and tried but it not help.
I want to take this element data-ad-status="unfilled" from HTML using javascript. So, i can use it in if else statement.
Like
if (data-ad-status="unfilled") {
some fuctions;
}
/*SELECTING BY CLASSANEMES*/
const withClassName = document.querySelectorAll(".adsbygoogle");
withClassName.forEach(ad => {
if ((ad.getAttribute("data-ad-status")) === "unfilled") {
console.log("unfilled ad element")
} else {
console.log("other ad element")
};
})<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>-document.querySelector("[data-ad-status='unfilled'] this one is electing particular one with data-ad-status="unfillded"
document.querySelectorAll("[data-ad-status]"); this one is selecting all with the data-ad-status attribute.const myDiv = document.querySelector("[data-ad-status='unfilled']");
const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
/*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
//let adStatus = myDiv.getAttribute("data-ad-status");
selectAllWithAttributeAdStatus.forEach(ad => {
if ((ad.getAttribute("data-ad-status")) === "unfilled") {
console.log("unfilled ad element")
} else {
console.log("other ad element")
};
})<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>we can use document.querySelector to select our element (if there is only one)
but in this case we need to use querySelectorAll for selecting all the ads elements in html (<ins>)
also now we can loop your logic on every element with that status, using forEach
with
forEachyou can get 3 other information,
- the element itself (which you can do your logic with, or console.log it)
- the index of the element
- the array of all the elements
with this order(element, indexOfElement, ArrayOfAllElements)
this is a example:
let unfilledAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="unfilled"]`);
let successAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="success"]`);;
/* not success */
unfilledAds.forEach((adElement) => {
/* your logic */
console.log(`❌ this Ad is not filled`, adElement);
});
/* success */
successAds.forEach((adElement) => {
console.log(`✅ this ad is visible to the user`, adElement);
});<!-- fail -->
<ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
<ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
<!-- success -->
<ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
<ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>you can also generalize
[data-ad-status]by selecting all the elements and then do a simple if, else (checking the result)