15

I have a html tag , in that initially I want tooltip name as mentioned in the "title" attribute. After I click on the link, I want different tooltip name. I have used the below code but it is not working. Can anyone please help me? 

<html>
<head>
<script>

function tool(){
document.getElementsByName(link).title = "after click";
}

</script>
</head>
<body>
    <a href="javascript:tool()" name ="link" title="before click">click here</a>
</body>
</html>
Improve this question

12 Answers 12

Reset to default
25

I am assuming this is just a simplified example of what you want to do, since changing the link onclick can be done inline:

 <a href="#" onclick="this.title='after click'" title="before click">...</a>

Either way, the best way is to avoid doing any lookups altogether. Simply pass in the reference to your link as a parameter to your function:

<script>
  function tool(link) {
    link.title = 'after click';
  }
</script>
<a href="#" onclick="tool(this)" title="before click">...</a>

Naturally, as Grant suggests, you can pass the title value to the function as well, but then you're really better off just doing the inline version all the way and skipping the function.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

+1. I'd make the solution a bit more generic, with: function tool(link, text) { link.title = text; } and <a href="#" onclick="tool(this, 'after click')" title="before click">...</a>. But for a one-off, the answer as-is is fine.
14

Get rid of the BR tag inside your SCRIPT element, and rewrite the tool function to:

function tool(){
    document.getElementsByName("link")[0].title = "after click";
}

and it will work. However, it is not the optimal way. If you assign an id parameter to the field you can at least use document.getElementById(..), or even better, use a library like jQuery.

Improve this answer

7 Comments

Showing error 'document.getElementsByName("link").0' is null or not an object....
" .0 "? I think you mean [0].
please note how the 0 is used. getElementsByName("link")[0] is the correct way to access the element at position 0 getElementsByName("link").0 will try to access a property that does not exist hence your exception
Never use getElementsByName when getElementById is what you want to do. As you're seeing, it just makes the problem worse.
-1. levik's answer (stackoverflow.com/questions/897541/…) is the better solution here. He can add the function to as many links as he wants and control the title text for each one.
|
5

Using jquery, you can write the following command :

$("a#link").attr("title","after click");
Improve this answer

3 Comments

He's not using jQuery though, he's using straight DOM manipulation. Why is anybody's guess.
I have used your code but it throwing error "Object expected". What should i do now?
Why complicate things by adding jquery into the mix? This is trivial dhtml.
4

You can use setAttribute(attributeName, value) on the element that you want to change.

document.getElementById('link').setAttribute('title', 'after click');

This also works for custom attributes

Improve this answer

3 Comments

This is showing error "Object doen't support this property or method"
getElementsByName returns a NodeList, you have to specify what element you are going to use, i.e. getElementsByName(link)[some number].setAttribute([...]).
My mistake. I thought you were selecting by id. I have updated the code.
1 
document.getElementsByName("link").title = "after click";
Improve this answer

2 Comments

You need only the first item in the collection. See @Waxwing's answer.
You can also use Id like document.getElementById('Id here').title = "after Click";
1

Correcting to Jason code:

write document.getElementById("link").title insteadof document.getElementsByName("link").title.

I have tested it on IE7 and Firefox 3.

<html>
<head>
    <script>
            function tool(){
                    document.getElementById("link").title = "after click";
            }
    </script>
</head>
<body>
    <a href="javascript:tool()" id="link" title="before click">
            click here
    </a>
</body>
</html>

You can also explore this article for creating nice tooltip using javascript: http ://devirtu.com/2008/08/14/how-to-make-tooltip-with-javascript/

Improve this answer

1 Comment

Thanks for that. I guess that makes 3 things wrong with the OP's code. I've corrected my entry.
0

I would use http://jquery.com/ download it and add a script reference to it

Give your a tag an id such as myLink

Then using JQuery you can write

$(document).ready(function () {

    $("#myLink").click(function(){

        $("#myLink").attr("title","after click");

    });

});
Improve this answer

1 Comment

i cant add new library because few restriction in our firm. Please tell sumother other option other than JQuery!
0

As waxwing suggests, it's better to use getElementById()

<a id="aLink" href="http://www.bla.com" title="hello">link</a>
 <script>

function tool(){
document.getElementById('aLink').title = "after click";
}

</script>
Improve this answer

Comments

0

Two things are wrong with your supplied code:

  • As the name implies, documentent.getElementById looks things up by ID, not name. You'll need to supply an ID in that anchor tag. Change your link to <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>

  • You're feeding documentent.getElementById the contents of a variable called "link", which presumably doesn't exist. You actually wanted to pass a literal string, which needs quotes. Change that call to document.getElementById("link").title = "after click";

Putting it all together, here's what your code would look like:

<html>
<head>
    <script>
        function tool(){
            document.getElementById("link").title = "after click";
        }
    </script>
</head>
<body>
    <a href="javascript:tool()" id="link" name="link" title="before click">
        click here
    </a>
</body>
</html>
Improve this answer

Comments

0 
<html>
<head>
<script>
window.onload = function () {
    window.document.getElementById("link").onclick = function () {
        this.title = "after click";
        return false;
    };
};
</script>
</head>
<body>
    <a href="http://www.example.com" id="link" title="before click">Click Here</a>
</body>
</html>
Improve this answer

Comments

0

I am tackling 2 issues here:

  1. Title is changed when mouse over, but not in the code:
    ...
    < a class="a" href="#" name="home" title="Home">Home
    ...
    document.getElementsByName("home")[0].title = "Title changed"; // working

  2. How to change the class of the link:

    FROM: < a class="a" href="#" name="home" title="Home">Home
    TO: < a class="current" href="#" name="home" title="Home">Home
    document.getElementsByName("home")[0].class = "current"; // not working

    Thanks!

Improve this answer

1 Comment

you need 'className' not class
0

The title has changed, but only in generated code. This is how JS works - it tackles only with presentation. Try to use Webdeveloper toolbar for Firefox because it has the option to show generated code along with the original one. If you need any other way, think of using some server-side programming.

My observations:

  • Never mix JS with HTML. If you need to update your code, it'll be much easier - search for "unobtrusive JS" to get a better grasp on the issue. <a href="javascript:..."> or <a href="#" onclick="..."> is therefore a bad coding practise.

  • Do not use large JS packages like JQuery for simple tasks. They're good only if used with their full potential.

  • Do you really need to perform HTML manipulation on the fly and why? Is title tooltip that important to your code? Who should benefit from it: end users or admin? What about accessibility?

  • INFO on the first code block:

  • If we don't know what link to use, we have to collect all of them
  • and then test the collection against onclick event
  • Suggestions:
    • use a better event handler ;)
    • collect links only from particular part of the page (main or navigation div) to improve speed
  • CAVEATS:
  • this may slow page rendering
  • title attribute is hardcoded and same for all links


function changeTitle1(){
// find the array of links inside the document
var a = document.getElementsByTagName('a');
// test the array against onclick event
for (var i = 0, j = a.length; i
  • INFO on the second code block:
  • We know exactly what link to check
  • Suggestion:
    • use a better event handler ;)
  • CAVEATS:
  • this can only be used on a single element
  • title attribute is hardcoded and same for all links

function changeTitle2(){
// find the link
var a = document.getElementById('action_link');
// onclick event
a.onclick = function() {
try{
// change title value
this.title = 'This unique click happened as well!';
// or use setAttribute() method like this
/* this.setAttribute('title', 'This unique click happened as well!'); */

// disable default link action
return false;
}
// clear memory leaks with try-finally block
finally{a = null;}
}
}


    window.onload = function() {
        changeTitle1();
        //changeTitle2();
    }

@spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :)

Short version:

<style type="text/css" media="screen">
    #home #current-home a,
    #contact #current-contact a,
    #about #current-about a
    {/* declarations to style the current state */}
</style>
</head>
<body id="home"> <!-- OR body id="contact" OR body id="about" -->
    <a href="#" title="Home" class="current-home">Home</a>
    <a href="#" title="Contact" class="current-contact">Contact</a>
    <a href="#" title="About us" class="current-about">About us</a>

Long version: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ (read the comments as well)

Note: is it necessary to display the link if you're already on the current page?

Improve this answer

1 Comment

<pre><code> function changeTitle1(){ // find the array of links var a = document.getElementsByTagName('a'); // test the array against onclick event for (var i = 0, j = a.length; i < j; i++){ try{ // onclick event a[i].onclick = function() { // change title value this.title = 'OMG, you clicked me!'; // or use setAttribute() method like this /* this.setAttribute('title', 'OMG, you clicked me!'); */ // disable default link action return false; } } // clear memory leaks with try-finally block finally{a[i] = null;} } // end for loop } </code></pre>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.