CODEWITHSUNDEEP
javascript
Greedy
Greedy

Reputation: 115

javascript change toggle button text

I have this piece of code which i use for language toggling:

function toggleDiv(divid) {  
varon = divid + 'on';
varoff = divid + 'off';
      if(document.getElementById(varon).style.display == 'block'){
      document.getElementById(varon).style.display = 'none';
      document.getElementById(varoff).style.display = 'block';
      }
        else {  
            document.getElementById(varoff).style.display = 'none';
            document.getElementById(varon).style.display = 'block'
        }
}

and HTML:

<div id="mydivon" style="display:block">some language text</div>
<div id="mydivoff" style="display:none">some other language text</div>
 <a href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>

and i would like to make toggle button switchable, when one Language1 is selected, switch toggle text to Language2 and vice versa. Some pointers would be welcome. Thx

Upvotes: 1

Views: 1001

Answers (3)

SidOfc
SidOfc

Reputation: 4584

As described by the OP in the comments:

Currently you're displaying an element on wether it's selected but the toggle itself isn't changing language.

Now what you can do is when you mousedown and execute toggleDiv(divid) there should be a special variable to your disposal called this

this basically means "this called me" in the most simple form. In your case this is the <a href="#">Language1/Language2</a> link

So what you could do then within your function:

function toggleDiv(divId) {
    //also highly recommend you cache your variables
    varon = document.getElementById(divId + 'on');
    varoff = document.getElementById(divId + 'off');

    if (varon.style.display == 'block') {
        varon.style.display == 'none';
        varoff.style.display = 'block';
        this.innerHTML = varoff.innerHTML; // <- selected element value injected in bound button
    } else
        varon.style.display == 'block';
        varoff.style.display = 'none';
        this.innerHTML = varon.innerHTML; // <- selected element value injected in bound button
}

With the line this.innerHTML = varon/off.innerHTML you're saying, "the element that called me has to have the value of the block element"

The value will still default be Language1/Language2 but as soon as you change it it will update.

Hope it helps!

NOTE: UNTESTED

Upvotes: 1

Shilly
Shilly

Reputation: 8589

Step 1: Add an id to your link:

<a id="toggle-language" href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>

Step 2: Change your function to:

function toggleDiv(divid) {  
    var on = document.getElementById(divid + 'on'),
        off = document.getElementById(divid + 'off'),
        language = document.getElementById('toggle-language');
    if (on.style.display == 'block'){
        on.style.display = 'none';
        off.style.display = 'block';
        language.textContent = 'Language 2';
    }
    else {  
        on.style.display = 'block';
        off.style.display = 'none';
        language.textContent = 'Language 1';
    }
}

Upvotes: 1

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

I've setup a Fiddle , is this the effect you wanted to achieve? As @Shilly already said in the comments, you can use textContent to change the content of your anchor tag.

I've assigned an ID to your anchor #languageSwitch so I can do following stuff in your JS

HTML

<div id="mydivon" style="display:block">
    Language 1 is selected
</div>
<div id="mydivoff" style="display:none">
    Language 2 is selected
</div>
<a id="languageSwitch" href="#" onmousedown="toggleDiv('mydiv');">
    Switch to Language2
</a>

JS

function toggleDiv(divid) {
    varon = divid + 'on';
    varoff = divid + 'off';
    // Assign the switch anchor to a variable
    var switcher = document.getElementById('languageSwitch');
    if (document.getElementById(varon).style.display == 'block') {
        document.getElementById(varon).style.display = 'none';
        document.getElementById(varoff).style.display = 'block';
        //Change the text to language1 (language 2 is active)
        switcher.textContent = "Switch to Language1";
    } else {
        document.getElementById(varoff).style.display = 'none';
        document.getElementById(varon).style.display = 'block'
        //Change the text to language2 (language 1 is active)
        switcher.textContent = "Switch to Language2";
    }
}

Upvotes: 2

Related Questions