Using javascript, I'm trying to change the background image of a div class when particular url params are entered. However it isn't switching the image in the background.
Example url:
example.com?campaignid=street
The HTML
<div class="row-background-79134">
<p>Some content here</p>
</div>
The script is here:
<script>
function getQueryParams(qs) {
qs = qs.split('+').join(' ');
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
var query = getQueryParams(document.location.search);
var myCampaign = query.campaignid;
if (myCampaign == "street"){
var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image1.jpg) no-repeat center center;'
}
if (myCampaign == "plumber"){
var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image2.jpg) no-repeat center center;'
}
if (myCampaign == "cowboy"){
var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image3.jpg) no-repeat center center;'
}
if (myCampaign == "hairdresser"){
var elems = document.getElementsByClassName('row-background-79134');
for(var i = 0; i < elems.length; i++) {
elems[i].style.background = 'url(https://example.com/image4.jpg) no-repeat center center;'
}
</script>
Any help on this would be great.
backgroundImageinstead, and assign theno-repeat center centerin the CSS file instead (since it never changes, there is no reason assigning this in js).