I just removed the whole question so I can start from scratch.
var redirectURL = decodeURIComponent(window.location.href);
if (redirectURL.includes("men")) {
alert('Mens');
$('#imageDiv').css("background", "url('https://mydomainname.com/wp-content/uploads/2023/04/STORE2.png')");
}
else if (redirectURL.includes("women")) {
alert('Womens');
$('#imageDiv').css("background", "url('https://mydomainname.com/wp-content/uploads/2023/04/STORE.png')");
}
#imageDiv{
background: url(https://mydomainname.com/wp-content/uploads/2023/04/compressed-Recovered.png);
width: 100px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imageDiv"></div>
This is not working as desired. The alerts show as they should but the image is not changing. THis is loading at the bottom of my page.
Answer:
var redirectURL = decodeURIComponent(window.location.href);
if (redirectURL.includes("men")) {
const imageDiv = document.getElementById('imageDiv');
imageDiv.dataset.style = "men";
}
else if (redirectURL.includes("women")) {
const imageDiv = document.getElementById('imageDiv');
imageDiv.dataset.style = "women";
}