Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – JavaScript Replace text (string) with image

am using elementor to show grid from custom posts, I need to replace some words appear with some images

I used this code but it apply on 1st post in the grid

    document.addEventListener('DOMContentLoaded', function() {
            var id = document.querySelector("#licon") 
      id.innerHTML = id.innerHTML.replace(/Earth Check/g, '<img src="./licon/ec.png">');
            id.innerHTML = id.innerHTML.replace(/Green Globe/g, '<img src="./licon/gg.png">');
            id.innerHTML = id.innerHTML.replace(/Green Key/g, '<img src="./licon/gk.png">');
            id.innerHTML = id.innerHTML.replace(/Green Star/g, '<img src="./licon/gs.png">');
        id.innerHTML = id.innerHTML.replace(/Travelife/g, '<img src="./licon/tr.png">');

thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yes, it's working now thank you.


  2. 0

    To apply the changes to all the custom post elements in your grid using JavaScript, you need to select all relevant elements and iterate through them to perform the replacements. The code you provided only targets the first element it finds with the ID licon. To apply the changes to all matching elements, you should use a class selector instead and loop through the NodeList of elements returned by querySelectorAll.

    Here is the update version of your code which loops through all the elements and replace the words.

    document.addEventListener('DOMContentLoaded', function() {
    // Select all elements with the class 'licon'
    var elements = document.querySelectorAll(".licon");
    
    elements.forEach(function(element) {
        element.innerHTML = element.innerHTML.replace(/Earth Check/g, '<img src="./licon/ec.png">');
        element.innerHTML = element.innerHTML.replace(/Green Globe/g, '<img src="./licon/gg.png">');
        element.innerHTML = element.innerHTML.replace(/Green Key/g, '<img src="./licon/gk.png">');
        element.innerHTML = element.innerHTML.replace(/Green Star/g, '<img src="./licon/gs.png">');
        element.innerHTML = element.innerHTML.replace(/Travelife/g, '<img src="./licon/tr.png">');
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search