循环随机变量和数组以解决包含多个JavaScript的问题

Question

I'm using the instructions given on a website to show charity adverts on sites where visitors have ad-blockers enabled.

Whilst the following code works brilliantly, I'm looking for a solution where I can combine multiple code snippets on the same page (to account for multiple adverts) without it breaking and without having to change it multiple times for inclusions on different websites.

The current code:

<div style="max-width: 300px; max-height: 250px; overflow: hidden;"><div class="adunit" id="ad-300x250">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" ></script>
<!-- Adblock4Charity - 300x250 -->
<ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-9259642480484018" data-ad-slot="2331359741"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</div><div style="height: auto; width: auto;"><a href="http://www.savethechildren.org"><img src="http://www.adblock4charity.com/wp-content/uploads/2014/11/Save-the-Children.jpg" alt="Save the Children" width="298" height="248" /></a>
<script>
window.onload = function() {
setTimeout(function() {
var ab4c = document.querySelector("div#ad-300x250 > ins.adsbygoogle");
if (ab4c && ab4c.innerHTML.replace(/s/g, "").length == 0) {
 ab4c.style.cssText = 'display:block !important';
 ab4c.innerHTML = '<a href="http://www.savethechildren.org"><img src="http://www.adblock4charity.com/wp-content/uploads/2014/11/Save-the-Children.jpg" width="298" height="248" /></a>'; }; }, 1000);
};
</script>

I'm looking for a solution and perhaps a working piece of code to work from that would allow me to replicate it on multiple sites with ease. I'm thinking something on the lines of creating random variable names, adding it to an array and looping through the array. Perhaps this isn't the best solution but I'm lacking on javascript knowledge.

Answer 1

Demo on JSFiddle

You'd probably benefit from reading about querySelectorAll .

As you can see, a for loop is a good option here. In the example, I selected all red squares. Then the inner HTML can be replaced in the loop.

I expect that this is enough to help you solve your problem. :)

HTML

<div class="square" id="red">
    <p>Red</p>
</div>
<div class="square" id="red">
    <p>Red</p>
</div>
<div class="square" id="yellow">
    <p>Yellow</p>
</div>

CSS

.square {
    width: 100px;
    height: 100px;
}
#red {
    background: red;
}
#yellow {
    background: yellow;
}

JS

var squares = document.querySelectorAll("div.square"),
    redSquares = document.querySelectorAll("div.square#red"),
    youLikeCharities = true;

if (youLikeCharities) {
    for (var i = 0; i < redSquares.length; i++) {
        redSquares[i].innerHTML = '<img src="http://www.adblock4charity.com/wp-content/uploads/2014/11/Save-the-Children.jpg" width="100" height="100" />';
    }
};