So I'm trying to get my website to find certain text and replace it with an <img> tag using this code...
function Emote() {
var stringg = document.getElementsByClassName("Post").innerHTML;
var resolutionn = stringg.replace("xD", "<img src='Icons/xD.gif' width='100px' height='100px' />")
document.getElementsByClassName("demo").innerHTML = resolutionn;
}
Emote();
When I debug with Firebug it outputs this...
The function getElementsByClassName returns an array of elements, rather than a single element. Arrays do not have the property innerHTML, thus such will be undefined.
If you want to apply this function to the first element matching the class, use:
document.getElementsByClassName("Post")[0].innerHTML
instead.
The return-value of document.getElementsByClassName("Post").innerHTML is undefined.
That because document.getElementsByClassName is retouring an array, not a single Element.
Use document.getElementsByClassName("Post")[0].innerHTML to access the first:
<script>
function Emote() {
var stringg = document.getElementsByClassName("Post")[0].innerHTML;
var resolutionn = stringg.replace("xD", "<img src='Icons/xD.gif' width='100px' height='100px' />")
document.getElementsByClassName("demo").innerHTML = resolutionn;
}
window.addEventListener("load", Emote);
// or window.onload = Emote();
</script>