Javascript change text onClick and then change back again

Question

I am trying to change the text of a link on click and then change back again to the original when clicked again. I am able to change the text, (from READ MORE... to CLOSE) but have been fighting to change the text back again (from CLOSE to READ MORE...)

 <script language="javascript">
 function changeText(idElement){
 if(idElement==1){
 document.getElementById('element'+idElement).innerHTML ='Close';
 } else if(idElement==2){
 document.getElementById('element'+idElement).innerHTML ='Close';
 }
 }
 </script>

 <a id="element1" onClick="javascript:changeText(1)">Read More...</a>
 <a id="element2" onClick="javascript:changeText(2)">Read More...</a>

Thanks for any help in advance.

You should spruce up on the concept of "unobtrusive javascript", mate... — MalSu, Aug 27 '12 at 17:29

David G · Accepted Answer · 2012-08-27T18:25:27.713

12

This should work:

function changeText(idElement) {
    var element = document.getElementById('element' + idElement);
    if (idElement === 1 || idElement === 2) {
        if (element.innerHTML === 'Read More...') element.innerHTML = 'Close';
        else {
            element.innerHTML = 'Read More...';
        }
    }
}

Demo: http://jsfiddle.net/UfVAH/

edited Aug 27 '12 at 18:25

answered Aug 27 '12 at 17:31

David G

94,763
41
167
253

score 7 · Answer 2 · edited Oct 29 '14 at 17:27

7

<a href="javascript:void(0)" onclick="if(this.innerHTML =='Read More'){this.innerHTML = 'Close'}else{this.innerHTML = 'Read More'}">Read More</a>

Just change the javascript:void(0); with the open/close function and make sure to return false.

edited Oct 29 '14 at 17:27

bluish

26,356
27
122
180

answered Sep 06 '13 at 08:05

Mathijs Segers

6,168
9
51
75

score 1 · Answer 3 · edited Sep 06 '13 at 08:22

<script language="javascript">
function changeText(idElement){
    if(idElement==1){
        document.getElementById('element'+idElement).innerHTML ='<a href="http://www.google.com">Google</a>';
    } else if(idElement==2){
        document.getElementById('element'+idElement).innerHTML ='<a href="http://woork.blogspot.com">Woork</a>';
    }
}
</script>

<ul>
<li id="element1">Google</li>
<li id="element2">Woork</li>
</ul>
<a href="#" onClick="javascript:changeText(1)">Change Google into a link</a><br/>
<a href="#" onClick="javascript:changeText(2)">Change Woork into a link</a><br/>

score 0 · Answer 4 · answered Aug 27 '12 at 17:28

Your function only calls one value, and once called, the elements in question aren't changing their function calls.

To clarify, I believe you should use a method of toggling the text instead of changing it. Please refer to the toggling portions of this tutorial to have your links change text as desired.

Decker W Brower · Answer 5 · 2012-08-27T18:37:44.250

Thats because your function is only setting the value to be 'Close' when the element gets a click. you need to check what the value is before you set it. so you should modify your function to be like this:

    function changeText(idElement){
        if(idElement==1){
            if( document.getElementById('element'+idElement).innerHTML == 'Read More' ){
                document.getElementById('element'+idElement).innerHTML = 'Close';
            } 
            else if( document.getElementById('element'+idElement).innerHTML == 'Close' ) {
                document.getElementById('element'+idElement).innerHTML = 'Read More';
            }
        } 
        else if(idElement==2){
            if( document.getElementById('element'+idElement).innerHTML == 'Read More' ) {
                document.getElementById('element'+idElement).innerHTML = 'Close';
            }
            else if( document.getElementById('element'+idElement).innerHTML == 'Close' ) {
                document.getElementById('element'+idElement).innerHTML = 'Read More';
            }
        }
    }

}

Javascript change text onClick and then change back again

5 Answers5