Question 101582 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – 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>
Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0
    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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search