If text in a cell contains a specific word then put an image in it #2

Question

I want my table to convert specific text to images.

I came close to a solution reading this thread: If text in a cell contains a specific word then put an image in it

The problem i experience is that the table only change the first text, if example "RED" occur a 2nd time it return blank to the cell instead of another red image.

I am very novice to programming and tried copy the code from the above thread, kind of know its wrong to do the repeat like I do instead of declaring it all in same paragraph but this is how it looks now and semi-works :)

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "red.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "RED") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}


var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "blue.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "BLUE") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "green.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "GREEN") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "cyan.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "CYAN") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "orange.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "ORANGE") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

Really appreciate if someone could help me so each new cell that also contain the specific text get an image!

Answer 1

You are appending the same DOM element so you'll only end up with a single image.

Move the image element creation inside your loop

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "RED") {
        node.textContent = "";
        var yourImage = new Image();
        yourImage.src = "red.png";
        node.appendChild(yourImage);
    }
}