Change text with javascript and keep src

Question

Sorry if it's a noob question !

I'm using a script to translate my page with this code:

<script>
        var translations= { 'en' : 
                                {'title' : 'Title', 'textimg' : 'English text'},
                            'fr' : 
                                {'title' : 'Titre', 'textimg' : 'Texte français'}
                          };
        function doTranslate(language) {
            for(id in translations[language]) {
                document.getElementById(id).innerHTML = translations[language][id];
            }
        }
</script>

And this html:

<a href="javascript:doTranslate('fr')"><img src="img/Fr-Flag.png"></a>
<a  href="javascript:doTranslate('en')"><img src="img/UK-Flag.png"></a>
<h2 id="title">Title</h2>

The problem comes when I use an image (little icon): the text changes, but src seems to disapear, so when the text change, the image is not displayed:

<img id="textimg" src="img/fav-rond.png">English text</img>

How to solve this ?

What is your expected output? Something like English [x] where English is some arbitrary translated text and [x] is the flag image? — kazenorin
– kazenorin, Commented Apr 6, 2016 at 9:27
I would like to have the image beside the changed text, like this: image English text -> image Texte français — Guillaume
– Guillaume, Commented Apr 6, 2016 at 9:29
Maybe you should provide a more complete HTML of your current implementation, it seems a bit ambiguous now. — kazenorin
– kazenorin, Commented Apr 6, 2016 at 9:42

Community · Accepted Answer · 2017-05-23 11:50:41Z

2

Please see this answer about content inside the img tags: Div tag within img tag

But a possible solution is to remove the id from img and create a new element around the text with that id. For example:

<img src="img/fav-rond.png" />
<span id="textimg">English text</span>

And a demo: https://jsfiddle.net/7j2ckw0r/1/

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Apr 6, 2016 at 9:28

Pimmol

1,8911 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guillaume Over a year ago

I have tried this, but the image is not beside the text

Pimmol Over a year ago

Make it span or use a little CSS

kvn · Accepted Answer · 2016-04-06 09:27:52Z

0

This should solve your issue.

document.getElementById(id).setAttribute("id", translations[language][id])

You shouldn't be using innerHTML to solve this issue.

answered Apr 6, 2016 at 9:27

kvn

2,3005 gold badges25 silver badges49 bronze badges

1 Comment

Guillaume Over a year ago

@SGS Venkatesh Your solution helped me to solve another problem (href) ! ;)

Pablo Lozano · Accepted Answer · 2016-04-06 09:30:51Z

0

The <img> tag does not allow any information within, it is a "Empty element"

If you add any text inside, that becomes an invalid HTML text.

What you can do is adding an alt attribute:

<img id="textimg" src="img/fav-rond.png" alt="English text"/>

answered Apr 6, 2016 at 9:30

Pablo Lozano

10.4k2 gold badges43 silver badges64 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:30Z

0

I strongly recommend you to visit this link, you will find the optimal way to translate your html page in pure JavaScript code.

JQuery search dom elements just after rendering and replace keys by its corresponding values

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 6, 2016 at 9:31

Hasan Awada

565 bronze badges

Comments

Martiens Kropff · Accepted Answer · 2016-04-06 09:44:39Z

0

It isn't possible to add text to an image tag, instead place a span element directly after the image and access that instead.

<img src="img/fav-rond.png" /><span id="textimg">English text</span>

answered Apr 6, 2016 at 9:44

Martiens Kropff

1181 silver badge11 bronze badges

Collectives™ on Stack Overflow

Change text with javascript and keep src

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related