javascript: Changing text

How to dynamically change text on HTML page with jscript? It is relatively easy to do this. Learn how to make web page where you can changing text with one click on link.

In this guide you will find how to:

• make a simple javascript function to change text after click on the link


• change text to two different words with click on first or second link with calling one javascript function


• change text of one link to "pressed" or "unpressed" after clicking that link


• hide and show text with changing link text to "show" or "hide"

In this samples text inside Div element is changed after click on link. You should know that it is possible to change text in various HTML elements such as buttons, paragraphs, text in drop down lists...

For more useful javascript effect tips follow the link.

Changing text with javascript after clicking a link

In this demo text will be changed after you click "Change text to AAA" link or another link "Change text to BBB". One link change text to first version ("Text changed to AAA") and a second link change text to another version ("Text changed to BBB").

Demo:

Change text to AAA Change text to BBB

This text will be changed

Here is a HTM/jscript code responsible for changing text demo:

<script language="javascript">
    function changeTextToAAA() 
    {
        document.getElementById("divA").innerHTML = 'Text changed to AAA';
    }

    function changeTextToBBB() 
    {
        document.getElementById("divA").innerHTML = 'Text changed to BBB';
    }
</script>

<a href="javascript:changeTextToAAA();">Change text to AAA</a>
<a href="javascript:changeTextToBBB();">Change text to BBB</a>

<div id="divA"><h4>This text will be changed</h4></div>

Explanation of code:

• Text is in the div element with id=divA


• when "Change text to AAA" link is clicked javascript function changeTextToAAA() is called


• In javascript function changeTextToAAA() innerHTML of divA (where text is stored) is changed to text "Text changed to AAA"


• Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag


• same principle for "Change text to BBB" link, when "Change text to BBB" is clicked it call function changeTextToBBB() which change text (innerHTML of divA to "Text changed to BBB")

Changing text with only one jscript function called from two links

Demo:

Change text to First Change text to Second

This text will be changed

In this demo text is changed to "First" or "Second" after clicking one of the links which call one jscript function with input parameter with text which appear.

Take a look at code:

<script language="javascript">
    function changeText(newText) 
    {
        document.getElementById("divB").innerHTML = newText;
    }
</script>

<a href="javascript:changeText('First');">Change text to First</a>
<a href="javascript:changeText('Second');">Change text to Second</a>

<div id="divB"><h4>This text will be changed</h4></div>

Explanation of code:

• Text is in the div element with id=divB


• when "Change text to First" link is clicked javascript function changeText() is called with parameter 'First' - so call to function look like changeText('First')


• word entered for input parameter is passed to jscript function which change text to this word - in this case this word is First but if jscript function changeText is called like changeText('MyText') then text will be changed to "MyText"


• In javascript function changeText() innerHTML of divB (where text is stored) is changed to text from input parameter 'First'


• same thing for "Change text to Second" link, when "Change text to Second" is clicked it call function changeText('Second') and changing text to "Second" (innerHTML of divB to "Second")

One link changing text to pressed or unpressed

Demo:

Unpressed

When page is loaded link text is "Unpressed". Press link and its text is updated to "Pressed". Click link again ant its text is changing to "Unpressed"...

Sample code:

<script language="javascript">
    function changeTextOfLink() 
    {
        var link = document.getElementById("linkClick");

        if (link.innerHTML == "Unpressed") 
        {
            link.innerHTML = 'Pressed';
        }
        else 
        {
            link.innerHTML = 'Unpressed';
        }
    }
</script>

<a href="javascript:changeTextOfLink();" id="linkClick">Unpressed</a>

Explanation of code:

• Link with id=linkClick have text "Unpressed", its innerHTML value is "Unpressed"


• when link linkClick is clicked jscript function changeTextOfLink() is called


• jscript function changeTextOfLink() check the innerHTML property of link id=linkClick, if link innerHTML property have value "Unpressed" it is changed to "Pressed"


• when link is clicked again (second time) it have innerHTML value set to "Pressed", then jscript function changeTextOfLink() change innerHTML value to "Unpressed"

Hide or show text in div and changing link text to "Hide" or "Show"

Hide

This div will be hidden

In this javascript demonstration div tag with text "This div will be hidden" is hided when use click link with "Hide" text. Link text is changed to "Show". When user click link again, div element with text "This div will be hidden" will be showed and link text is changing to "Hide".

Code:

<script language="javascript">
    function divToHide(divToHideOrShow) {
        var link = document.getElementById("linkId1");
        var div = document.getElementById(divToHideOrShow);

        if (div.style.display == "block") 
       {
            div.style.display = "none";
            link.innerHTML = 'Show'
        }
        else 
       {
            div.style.display = "block";
            link.innerHTML = 'Hide';
        }
    }
</script>

<a href="javascript:divToHide('divShowHide');" id="linkId1">Hide</a>
<div id="divShowHide" style="position:absolute; display: block"><h4>This div will be hidden</h4></div> 

What this code do:

• Link with id=linkId1 and text "Hide" on click call jscript function divToHide


• in div element with id=divShowHide is text "This div will be hidden"


• when link lnikId1 is clicked jscript function divToHide() is called


• jscript function divToHide check if div element divShowHide is hidden or showed


• if div element divShowHide is showed (div.style.display == "block") then div divShowHide is hided and text of link linkId1 is changing to "Show"


• if div element divShowHide is hided then div divShowHide is showed and text of link linkId1 is changing to "Hide"