I'm trying to randomize value using javascript
but after trying for several hours I am failed continuously many time.
Here is the code which I am using.
<script type="text/javascript">
var banner1 = ["ca-pub-3060228829854466", "8550285936"];
var banner2 = ["ca-pub-3680851546903667", "4280702589"];
var allbanner = [banner1, banner2];
var banner = allbanner[Math.floor(Math.random() * allbanner.length)];
</script>
I have added two array banner[0]
and banner[1]
. when I am using in another JS
, it not calling the value's.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336*280 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="banner[0]"
data-ad-slot="banner[1]"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Thanks for your help.
<?php
function generateRandomString($length = 10) {
$characters = '0123456789';
$randomString = '';
for ($i = 0; $i < $length; $i++) {
$randomString .= $characters[rand(0, strlen($characters) - 2)];
}
return $randomString;
}
?>
<script type="text/javascript">
var banner1 = ["ca-pub-3060228829854466", "<?php echo generateRandomString();?>"];
var banner2 = ["ca-pub-3680851546903667", "<?php echo generateRandomString();?>"];
var allbanner = [banner1, banner2];
var banner = allbanner[Math.floor(Math.random() * allbanner.length)];
</script>
If they are actually in different script tags, you can't share a var
across scopes like that. You can assign it globally to the window variable by leaving out the var
but that's not ideal.
so you would need to change
var banner = allbanner[Math.floor(Math.random() * allbanner.length)];
to
banner = allbanner[Math.floor(Math.random() * allbanner.length)];
Edit: You cannot access javascript variables outside of a script tag in plain old vanilla javascript. Can a JavaScript variable be used in plain HTML?
You can to give your <ins>
an id
so you can target it from javascript using document.getElementById()
and then using element.setAttribute()
to set its data attributes.
element.setAttribute()
sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
reference:developer.mozilla.org/setAttribute.
Here is the corrected code:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336*280 -->
<ins id="insId"
class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client=""
data-ad-slot=""></ins>
<script type="text/javascript">
var banner1 = ["ca-pub-3060228829854466", "8550285936"];
var banner2 = ["ca-pub-3680851546903667", "4280702589"];
var allbanner = [banner1, banner2];
var banner = allbanner[Math.floor(Math.random() * allbanner.length)];
var el = document.getElementById("insId");
el.setAttribute('data-ad-client', banner[0]);
el.setAttribute('data-ad-slot', banner[1]);
// the below two lines are only for the purpose of the snippet
console.log('data-ad-client: ' + el.getAttribute('data-ad-client'));
console.log('data-ad-slot: ' + el.getAttribute('data-ad-slot'));
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>