Access value of HTML title attribute as variable in onclick function

Question

I want to access the value of the HTML title attribute as a variable for the onclick function.

This is an example for my HTML elements:

<a title="id:4" onclick="openWin(4)">example</a>

This is my JavaScript function:

function openWin(number)
{
    window.open("http://www.some-example.org/some/example/id:"+number)
}

This works but since I have a lot of HTML elements, I'd like to find a way to reference the title value inside the openWin() function instead of writing "openWin(someNumber)". Do you have any ideas how to do this?

Any help would be much appreciated!

well you would have to access the event sender, so you could use: openWin(this) and el.attr('title') — Vogel612
– Vogel612, Commented Sep 4, 2013 at 9:58
The title attribute is not meant to store program data, but human readable descriptions to the current element. If you need to assign some chunk of data to an HTML element use the data-* attributes instead. — feeela
– feeela, Commented Sep 4, 2013 at 10:08

Denys Séguret · Accepted Answer · 2013-09-04 09:56:57Z

4

You could do this :

HTML :

<a title="id:4">example</a>

JavaScript :

$(function(){
     $('a[title]').click(function(){
         window.open("http://www.some-example.org/some/example/"+this.title)
     });
});

answered Sep 4, 2013 at 9:56

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

Comments

Anton · Accepted Answer · 2013-09-04 09:57:13Z

3

$('a').on('click', function () {
    var number = this.title.replace('id:', '');
    window.open("http://www.some-example.org/some/example/id:" + number)
});

answered Sep 4, 2013 at 9:57

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

Ishan Dhingra · Accepted Answer · 2013-09-04 10:07:17Z

3

Here is solution if you want Number value only from Tittle:

HTML

<a title="id:4" onclick="openWin(this)">example</a>

JS

function openWin(el)
{
    window.open("http://www.some-example.org/some/example/id:"+el.title.split(':')[1]);


}

Here is live URL:

http://jsbin.com/eGUCoWU/4/edit

answered Sep 4, 2013 at 10:07

Ishan Dhingra

2,4625 gold badges32 silver badges43 bronze badges

1 Comment

feeela Over a year ago

+1 for split(':')[1] even if this answer still uses inline JS event handler;

Pat Dobson · Accepted Answer · 2013-09-04 10:12:18Z

1

How about this

$('a').click(function(){
    titleVar = $(this).attr('title').slice(3,4);
    ... do something with titleVar
 });

I might not have got the slice parameters right but, this will grab the title attribute, remove the 'ID:' bit and put the number alone into 'titleVar'. You can then do whatever you wish with titleVar.

answered Sep 4, 2013 at 10:12

Pat Dobson

3,2992 gold badges23 silver badges36 bronze badges

Comments

plaes · Accepted Answer · 2013-09-04 10:41:32Z

1

$('a').click(function(){
  window.open("http://www.some-example.org/some/example/id:"+ $(this).attr('title').split(':')[1]);
});

edited Sep 4, 2013 at 10:41

plaes

32.9k11 gold badges95 silver badges89 bronze badges

answered Sep 4, 2013 at 10:23

user2746400

112 bronze badges

Comments

Quentin · Accepted Answer · 2013-09-04 09:57:18Z

-1

Inside your event handler function, this will be the HTML element on which the event fired.

HTML elements have a title property containing the value of the title attribute.

onclick="var foo = this.title"

You can then do whatever you like with foo.

answered Sep 4, 2013 at 9:57

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Access value of HTML title attribute as variable in onclick function

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related