CODEWITHSUNDEEP
javascriptimagetextreplace
Ilias Moustakas
Ilias Moustakas

Reputation: 27

text is replacing image instead of being shown upon it

I've recently started learning html, css and Javascript and I'm understanding more and more stuff by the day.. Anyway, I have this class in my body that shows an image:

<div class="notepad" id="notepad">
    <img src="images/notepad.jpg" alt="Notepad"/>
    <p class="notepad">test</p>
</div>

And I also have this function inside a javascript file:

function textonimage(){
        document.getElementById("notepad").innerHTML =
         '<p class="notepad">'+"texty blah blah"+'</p>';
    }

My problem is that my image gets replaced by the function's text, instead of being shown upon it. I've tried quite a few things but without success. What am I doing wrong?

Thanks for your time!

Upvotes: 1

Views: 118

Answers (2)

Griffin
Griffin

Reputation: 14584

The problem is that you are overwriting the HTML in "notepad". Change the function to:

function textonimage(){
    document.getElementById("notepad").innerHTML +=
     '<p class="notepad">'+"texty blah blah"+'</p>';
}

Upvotes: 2

alex
alex

Reputation: 490143

You are replacing the innerHTML of the element with the id notepad. It won't do a selective replacement, it will overwrite the whole inner HTML.

You probably want something like...

function textonimage(){
    document
     .getElementById("notepad")
     .getElementsByTagName('p')[0]
     .innerHTML = "texty blah blah";
}

Upvotes: 0

Related Questions