'Send Javascript Variable to HTML Img Source

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>
javascripthtmlimageelementor


Solution 1:[1]

  1. Wrong call to get
  2. image source is not assigned anywhere, img src=pictureURL is wishful thinking
  3. switch does not return a value

The 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">

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Misfits09

Related Questions