I have an html page which has a link called "open". Once the link is clicked the text "open" should change to "close". How do I do this?
Add a comment
|
5 Answers
Script
<html>
<head>
<script type="text/javascript">
function open_fun() {
document.getElementById('link').innerHTML = "<a href='javascript:clo_fun()'>CLOSE</a>";
}
function clo_fun() {
document.getElementById('link').innerHTML = "<a href='javascript:open_fun()'>OPEN</a>";
}
</script>
</head>
<body>
<div id='link'><a href='javascript:open_fun()'>OPEN</a></div>
</body>
</html>
4 Comments
i2ijeya
Satish, the above code is not working. Wats the below code do, <a href='close()'>close</a>.. Why u are using "close()", what does it do?
peirix
first of all: inline javascript is a bad idea. second: using href to do javascript is even worse. bad, bad solution.
sathish
First time i gave a idea thats all. I dint tell to add script tag inline. Here is my edited script.
i2ijeya
Thank you satish, This is working well. thanks and thanks for everyone for their valuable comments and answers...
<a href="" onClick="this.innerHTML = 'close'">Open</a>
You could also call some type of toggle function for swapping the text on multiple clicks.
function toggle(lnk_obj){
lnk_obj.innerHTML = (lnk_obj.innerHTML == 'close') ? 'open' : 'close' ;
}
<a href="" onClick="javascript:toggle(this);">Open</a>
addEventListener is not supported in IE. If you don't need other onclick events on the link, use this:
elm.onclick = function (e) {
this.innerHTML = "close";
};
3 Comments
silent
InnerHTML is evil. It is better to use nodeValue.
Boldewyn
@i2ijeya: e is the default parameter that is given to event-handling functions in FF, Opera and WebKit based browsers, an Event object. @silent: It is evil, but it is also foolproof. Using nodeValue involves testing if a firstChild exists.
Boldewyn
You can, by the way call the 'e' whatever you like. Most tutorials go with 'event' here.
Say you have link:
<a id="link" href="https://www.example.com" onclick=change(event)>open</a>
Then you can use the following javascript code
const change = (event) => {
const link = document.getElementById("link");
link.text = link.text === 'open' ? 'close' : 'open';
event.preventDefault();
}
So to change label value you can simply use the text property of the element:
link.text = 'closed'; // now the text on the href will be 'closed'
I will add a a fiddle to demonstrate the workings of this simple code.
Also check documentation here on MDN for the text property on an HtmlAnchorElement:
HTMLAnchorElement.text
Is a DOMString being a synonym for theNode.textContentproperty.
So instead of changing the text node you can set this text property directly. This is merely a simple code example for demonstrating the working. You could for example also grab the anchor element from the event...
Note: Setting innerHTML (advised in other answers) is not considered safe since it can be used for injecting malicious code into the DOM.
1 Comment
Wilt
I edited my answer and added a fiddle demonstrating the code. Please do not downvote without giving any proper feedback. The answer is solid and end the text property on HTMLAnchorElement is exactly for the purpose of manipulating the label like OP requests..
If elm is the link:
elm.addEventListener("click", function(){
this.innerHTML = "close";
}, true);
2 Comments
jaywon
no, this will not work cross-browser. attachEvent is IE's method of attaching events, addEventListener works in all others as far as I'm aware
Wilt
Using innerHTML is not considered good practice. See also comment from @silent under the other answer. It can be used for injecting malicious code into the dom. For setting the text label you can simply use the text property on the HTMLAnchorElement.