CODEWITHSUNDEEP
javascriptjqueryhtml
JosephConrad
JosephConrad

Reputation: 688

Html change part of the label text

I have the following javascript code:

window.toggle = function() {
 if( document.getElementById("calendar").style.display=='none' ){
     document.getElementById("calendar").style.display = '';
     $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
     document.getElementById("label").innerText = "Hide calendar";
 } else {
     document.getElementById("calendar").style.display = 'none';
     $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
     document.getElementById("label").innerText = "Show calendar";
 }
}

I would like to change only a part of label, because I wouldn't like to remove bootstrap icons. Like here: http://jsfiddle.net/RkaQD/2/

Have you any hints how to cope with this disappering bootstrap icons?

Edit:

Maybe I write some example what I would like to have:

v 'show calendar'

^ 'hide calendar'

v 'show calendar'

^ 'hide calendar'

and so on...

Upvotes: 1

Views: 1784

Answers (2)

Thanos
Thanos

Reputation: 3059

The problem you are facing is because you are changing the inner text of the element with ID label.... this label has the two icon elements inside it as well besides the text.

What i did was putting the text "Hide Calendar" and "Show Calendar" into a span with ID and then changing the inner text of the span ( not the label ) So instead of having:

<i class="icon-chevron-down"></i>
    Show calendar  
<i class="icon-calendar"></i>

You must have 

<i class="icon-chevron-down"></i>
    <span id="display_text">Show calendar</span>  
<i class="icon-calendar"></i>

And change the 2 lines on your JavaScript from

document.getElementById("label").innerText = "Hide calendar";
document.getElementById("label").innerText = "Show calendar";

to

document.getElementById("display_text").innerText = "Hide calendar";
document.getElementById("display_text").innerText = "Show calendar";

Hope this helped.

Upvotes: 1

Edper
Edper

Reputation: 9322

I think it's innerHTML nstead of innerText.

Upvotes: 2

Related Questions