Question

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!

Answer 1

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>';
}