CODEWITHSUNDEEP
javascripthtmlcssonclickinnerhtml
Frans Bergström
Frans Bergström

Reputation: 65

Click on img link to change text inside a div

I have a page with 4 images and a div box containing some text. When I click on one of the images I want the text to change to something else.

My goal is to be able to click on each image and get information about them without making an entirely different HTML just for a slight change in one div.

<script type="text/javascript">
function changeText(){
document.getElementById('MyDiv').innerHTML = 'New Text';}
</script>

<a href="#"><img src="images/about.jpg" onClick="changeText()"></a>
<div class ="text" id="MyDiv"><p>Welcome blabla</p></div>

This is the code I've been trying to make it work but it doesn't. I'd like to code it in Javascript as well.

Upvotes: 1

Views: 786

Answers (2)

Adam MacDonald
Adam MacDonald

Reputation: 1958

Do you mean information about the image itself? If you want for example the value of src or perhaps title or some other attribute, you could do something like:

<script type="text/javascript">
    function changeText(obj){

        var div=document.getElementById('MyDiv');
        div.innerHTML='';

        var p=document.createElement('p');
        p.appendChild(document.createTextNode(obj.title + ' '+ obj.src));

        div.appendChild(p);

    }
</script>

<img src="images/about.jpg" title="About Something" onclick="changeText(this)" style="cursor: pointer;" />

<div class="text" id="MyDiv">
    <p>Welcome blabla</p>
</div>

The p tag will be overwritten to include the title and src of the image (in this example)

Upvotes: 1

ErasmoOliveira
ErasmoOliveira

Reputation: 1426

use Jquery html function

$('myImgClass').html('myText');

Upvotes: 0

Related Questions