Javascript language switch on same button

Question

I have this part of the code:

JS:

function changeText() {
    document.getElementById('lang').innerHTML = 'default language';
}

HTML:

<p id='lang'> 
    some other language 
    <input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/>
</p>

"Click me" button works, and switches "default language" to "some other language", but disappears after initial click. I would like to be able to switch back and forth languages on that same button, but i was able only to add another button. Help ?

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

The problem is that you replace the whole inner HTML, the whole content of the p tag including the button.

You will want to put the content you want to replace in a sub element, for instance a span:

<p> 
   <span id='lang'>some other language</span> 
   <input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/>
</p>

You can now safely replace the content of the span because you have no other needed HTML markup in there.

You can achieve the same by using additional JavaScript but changing the markup is possibly the easiest and most clear solution.

Hint: Putting click handlers into the onclick attribute is considered bad coding style. (Why is using onClick() in HTML a bad practice?)

edited May 23 '17 at 11:57

Community

1
1

answered Jul 30 '15 at 09:15

idmean

14,540
9
54
83

Also doesnt switch back to default language ? – Greedy Jul 30 '15 at 09:32
@Greedy Sorry? I don't understand what you mean? – idmean Jul 30 '15 at 09:33
I need that same button to switch back to default text, now it doesnt dissappear, but i cant switch back to original text (language) – Greedy Jul 30 '15 at 09:37
to Switch to default language you should Declare two String variables : lang1 and lang2 and then onclick if innerHTML == lang1 switch to lang2 and vice versa – Elheni Mokhles Jul 30 '15 at 09:37
@Greedy If you try you will be able to figure that out yourself. Programming it not *letting stupid Stack Overflow users code for you* – idmean Jul 30 '15 at 09:39

score 0 · Answer 2 · edited Jul 30 '15 at 10:19

0

It disappears because your input is in the <p></p>. You need to get the input out of the p.

<p id='lang'> some other language</p>
<input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/>

Another thing : why you're using an input type text to do the work of a button ?

edited Jul 30 '15 at 10:19

uladzimir

5,639
6
31
50

answered Jul 30 '15 at 09:16

Elheni Mokhles

3,801
2
12
17

fuyushimoya · Answer 3 · 2015-07-30T09:42:50.470

Because <input> is inside the <p>, so when you replace the innerHTML with new value, it'll also be overwrite.

some other language in <p> is still a node, so you can pick it up using p.childNodes[0], then change its node value to the new one. Which, won't affect the input now.

And if you want to toggle text, you have to include logic to switch between the languages.

function changeText()
    {
     var p  = document.getElementById('lang');
     var langList = ['some other language', 'default language'];
     // Get current index
     var idx = p.dataset.lang;
     idx = idx == null ? 0 : parseInt(idx, 10);
      
     // Switch to next language
     idx = (idx + 1) % langList.length;
     p.dataset.lang = idx;
      
     p.childNodes[0].nodeValue = langList[idx];
    }

<p id='lang'> some other language <input type='text' style="font-size: 12px;" onclick='changeText()' value='click me'/></p>

Mkaaay, but it doesnt switch back to default language ? – Greedy Jul 30 '15 at 09:28 — Greedy, Jul 30 '15 at 09:28
@Greedy Added how to do it. – fuyushimoya Jul 30 '15 at 09:37 — fuyushimoya, Jul 30 '15 at 09:37

Javascript language switch on same button

3 Answers3