Estoy utilizando un fragmento de código JavaScript para cambiar las fuentes de imagen en un sitio web de WordPress (aprovechando el editor de Elementor), que se basa en hacer clic en un botón para actualizar la URL con una cadena específica. Por ejemplo, este proceso produciría lo siguiente:
Antes de hacer clic: www.website.com/acoolpage/
Después de hacer clic: www.website.com/acoolpage/?picture=ws10m
Este constructor HTML crea la dimensión de la imagen, pero no actualiza la fuente de la imagen con el resultado deseado después de hacer clic en el botón, cuando la URL cambia a www.website.com/acoolpage/?picture=ws10m . ¿Qué pasos y/o modificaciones adicionales se requieren? ¡Gracias!
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 es una ilusiónLa sentencia switch evalúa una expresión, haciendo coincidir el valor de la expresión con una cláusula de caso, y ejecuta sentencias asociadas con ese caso, así como sentencias en casos que siguen al caso coincidente.
Probablemente quisiste hacer esto
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">Alternativa para más versiones
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">Puede usar el evento de cambio de locationchange para detectar si la URL se ha cambiado al hacer clic en un botón.
El código es el siguiente :
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