I am utilizing a piece of JavaScript code to change image sources on a WordPress website (leveraging the Elementor editor), which is based on a button click updating the URL with a specific string. For example, this process would yield the following:
Before Click: www.website.com/acoolpage/
After Click: www.website.com/acoolpage/?picture=ws10m
This HTML constructor creates the dimension of the image, but does not update the image source with the desired result after the button click, when the URL switches to www.website.com/acoolpage/?picture=ws10m. What additional steps and/or edits are required? Thanks!
const urlParams = new URLSearchParams(window.location.search);
const pictureParam = urlParams.get('?picture=')
const pictureUrl =
switch (pictureParam) {
case 'ws10m':
return 'https://www.website.com/graphics/image_ws10m.png'
break
default:
return 'https://www.website.com/graphics/image_t2m.png'
break
}<body>
<img src=pictureURL alt="Test" width="1920" height="1080">
</body>img src=pictureURL is wishful thinkingThe switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.
You likely meant to do this
window.addEventListener("DOMContentLoaded", function() {
const urlParams = new URLSearchParams(window.location.search);
const pictureParam = urlParams.get('picture')
document.getElementById("img").src = `https://www.website.com/graphics/image_${pictureParam === 'ws10m' ? 'ws10m.png' : 't2m.png'}`
})<img src="" id="img" alt="Test" width="1920" height="1080">Alternative for more versions
window.addEventListener("DOMContentLoaded", function() {
const urlParams = new URLSearchParams(window.location.search);
const pictureParam = urlParams.get('picture');
document.getElementById("img").src = `https://www.website.com/graphics/image_${pictureParam ? pictureParam : 'default.png'}`
})<img src="" id="img" alt="Test" width="1920" height="1080">You can use the locationchange event to detect if the URL has been changed by a button click.
The code is as follows :
const obj = document.getElementById('#IDFromDOM');
function updateImage(){
const urlParams = new URLSearchParams(window.location.search);
const pictureParam = urlParams.get('picture')
const pictureUrl = pictureParam === 'ws10m' ? 'https://www.website.com/graphics/image_ws10m.png' : 'https://www.website.com/graphics/image_t2m.png'
obj.src = pictureUrl;
}
window.addEventListener('locationchange', updateImage);
updateImage(); //Fire a first time on page load