Setting the title attribute of an <a> tag in javascript

Question

I'm trying to make changes in a code which shows, "title", using jQuery, from this JavaScript code:

<a id="photo" href="{%=file.url%}" title="{%=file.name%}" 
download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>

Using this " title="{%=file.name%} " it shows all the name of the file (containing image type - .jpg.)

I tried to add an id, as upper, and use:

document.getElementById("photo").setAttribute("title", "new title");

But I coudn't make it working. I would like add to the script:

 var title2="{%=file.name%}";
 title = (title2.slice(2, title2.length-4));    

To cut first 2 chars and 4 last. And then set it as a title.

Anyone can help?

Thanks!: )

---

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}

<td style="padding-left:10px; display: inline-block;" class="template-download fade">
<div align="center" class="thumbnail" class="preview">
{% if (file.thumbnailUrl) { %}

<a id="photo" href="{%=file.url%}" title="{%=file.name%}" 
download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>           

 {% } %} </div>

<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}"  {%=file.thumbnailUrl?'data-gallery':''%}></a>

{% } %}</p></td>'{% } %}
</script>

I'am sending it couse, the < a > tag is in the JS, in the body, not in clean html, and maybe document.getElementsById, and document.getElementsByName will not work here? And I don't know from where I shoud call this ID. There are small bug in this JS (')but it works! :)

Answer 1

You can achive what you want by using this.

   var str = '';
//get name and put it in str here.
document.getElementsById("photo").title = str.slice(2, str.length-4);//str is the the name of the file.

or you can get all the links using

document.getElementsByName("link")[0].title = str.slice(2, str.length-4);

where your link should have name attr

<a href="#" name="link" tit......><img src="#"></a>

Hope that helps!

Answer 2

Can you try like this

var  image = "picture.jpg"
var tiitle= image.substr(0, image.indexOf('.')); 
var tiitle = tiitle.substr(2,tiitle.length)
document.getElementById("photo").setAttribute("title", tiitle );

fiddler Link

Answer 3

if you're using jquery, like you said, try it like this:

<script>
$(document).ready(function () {
    var str = $('#photo').attr('title');
    $('#photo').attr('title',str.slice(2, str.length-4));
});
</script>

Answer 4

Can you try giving your element a name in stead, so you can search it and then try:

document.getElementsByName("link")[0].title = "New title";

This may not be your final solution, but if that works, then it could be that your title attribute contains some characters it can't handle, but maybe you could tell us if there are any console errors on your existing call..