Setting title attribute with Javascript function

Question

I am trying to find, if I can pass a value on the title attribute of a label element using Javascript?

I have tried the following Javascript code:

function myFunction()
{
    return "Hello!";
}

And a piece of HTML code:

<label title="myFunction()">TEST</label>

But, this isn't working. It just show the 'myFunction()' as a text.

Is it possible, what I am trying to do? If yes, what is the correct syntax?

You cannot invoke a JS function from the title attribute. What is it you are trying to accomplish? — Kevin Boucher
– Kevin Boucher, Commented Oct 9, 2012 at 20:04
Hi, I want a random number of labels that are in a template and get generated dynamically to also get dynamicaly using javascript the text to show. This text my differ it is not static — Redg
– Redg, Commented Oct 9, 2012 at 20:14

daknøk · Accepted Answer · 2012-10-09 20:07:48Z

35

<label id='mylabel'>TEST</label>
<script>
    function myFunction() {
        return "Hello!";
    }

    document.getElementById('mylabel').setAttribute('title', myFunction());
</script>

Should do the job. It first selects the label and then sets the attribute.

answered Oct 9, 2012 at 20:07

daknøk

6465 silver badges11 bronze badges

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

2 Comments

daknøk Over a year ago

OP wants to set the title using JavaScript, and my code does exactly that. What part of this answer do you think is wrong?

trejder Over a year ago

@KevinBoucher For me it was obvious, what OP is trying to do and daknøk's answer seems to fit perfectly here.

Denys Séguret · Accepted Answer · 2012-10-09 20:06:02Z

11

You can't inline javascript like this.

What you may do is

1) give an id to your label and put this at the end of your body

<script>
   document.getElementById('myId').title = myFunction();
</script>

Demonstration

2) if you really want to inline the call, write this at the point where you want your label :

<script>
     document.write('<label title="'+myFunction()+'">TEST</label>');
</script>

(this is really not recommended)

answered Oct 9, 2012 at 20:06

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

3 Comments

Kevin Boucher Over a year ago

What you describe should result in the same behavior as described by OP.

Denys Séguret Over a year ago

@KevinBoucher NO. See demonstration.

Danon Over a year ago

It is true that it would work, but please don't use document.write.

Siva Charan · Accepted Answer · 2012-10-09 20:11:27Z

8

Try this way:-

HTML:

<label id="lab">TEST</label>

JS:

window.onload = function() {
    document.getElementById('lab').setAttribute('title','mytitle');
    alert(document.getElementById('lab').title);
}

Refer LIVE DEMO

answered Oct 9, 2012 at 20:11

Siva Charan

18.1k10 gold badges64 silver badges95 bronze badges

1 Comment

Redg Over a year ago

If i use jquery and have as a selector a certain class instead of the id then I can do to all the label required the text in the title that is needed. Your logic however is what I want to implement in general. Thanks

Ravi math · Accepted Answer · 2023-01-18 12:48:50Z

1

I got this! If you are using angular you can use this data Binding and call the function

<label title="{{myFunction()}}">TEST</label>

edited Jan 18, 2023 at 12:48

answered Jan 18, 2023 at 12:48

Ravi math

112 bronze badges

Collectives™ on Stack Overflow

Setting title attribute with Javascript function

4 Answers 4

2 Comments

3 Comments

HTML:

JS:

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

HTML:

JS:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related