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(":"+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!

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/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!

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 4, 2013 at 9:55 atrejuatreju 99577 gold badges1616 silver badges3737 bronze badges 2

• well you would have to access the event sender, so you could use: openWin(this) and el.attr('title') – Vogel612 Commented Sep 4, 2013 at 9:58
• 1 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 Commented Sep 4, 2013 at 10:08

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

You could do this :

HTML :

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

JavaScript :

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

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

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/some/example/id:"+el.title.split(':')[1]);


}

Here is live URL:

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

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.

$('a').click(function(){
  window.open("http://www.some-example/some/example/id:"+ $(this).attr('title').split(':')[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.