Hello,
Below js code is creating a link to an image and giving a background color of the a word or text in an html page. The problem I am having now is that, when this line of code 'formatted-ticket-content' has # infront, the code creates a link to an image. However, the code for searching a word or text in an html page and giving it a background doesn't work.
const element = document.getElementById('#ticket-content');
When I remove the # infront of ticket-content, the code for searching a word or text in an html page and giving it a background works but the code for creating a link to an image doesn't work.
const element = document.getElementById('ticket-content');
What I have tried:
if (A == true && B == true && C == true) {
let link = document.createElement("a");
var linkText = document.createTextNode(images[i].name);
link.appendChild(linkText);
link.title = images[i].name;
link.href = images[i].image_src;
document.getElementById('ticket-content').prepend(link);
const htmlEncode = value => {
const span = document.createElement("span");
span.innerText = value;
return span.innerHTML;
};
const highlightWord = wordToFind => {
const element = document.getElementById('#ticket-content');
const originalLines = element.textContent.split("\n");
const newLines = originalLines.map(line => {
if (!line.includes(wordToFind)) {
return htmlEncode(line);
}
const parts = line.split(", ").map(htmlEncode);
parts[0] = `<span style="background-color:yellow;">${parts[0]}</span>`;
return parts.join(", ");
});
element.innerHTML = newLines.join("\n");
};
highlightWord("One Two");
I also tried using below but it's giving me the same result. Hoping someone can help me on this issue. Thank you very much.
document.querySelector('ticket-content'); or document.querySelector('#ticket-content');