taking the html title to a javascript variable

Question

How do I get the variable in the titleText "Some Name" from the JS file to populate or take the title from the hyperlink "sometitle" in the HTML code?

JS

var randomtext={ titleText:"Some Name",}

HTML

<a class="css" title="sometitle" href="#">Your HTML Here</a>

I would like the JS to then change to:

JS

var randomtext={ titleText:"sometitle",}

Titletext name coming from the title in the anchor of the hyperlink

I tried the following and it didn't work

JS

    var randomtext={ 
titleText:document.getElementsByClassName('css')[0]; randomtext.titleText = anchor.getAttribute('title');,
title2: "name1",
title3: "name3",
title4: "name4",

}

Butt4cak3 · Accepted Answer · 2013-09-19 14:03:06Z

1

First, you need to identify the <a> element somehow. The easiest way would be to give it an ID.

Then, using document.getElementById, you can access the hyperlink inside your script. Once that's done, you can access its title with setAttribute and getAttribute.

HTML

<a id="myLink" class="css" title="sometitle" href="#">Your HTML Here</a>

JavaScript

var link = document.getElementById("myLink");

// Take the title from the link
var randomText = { titleText: link.getAttribute("title") };

// Change the link's title
link.setAttribute("title", randomText.titleText);

I hope this is what you asked for, because, if I'm honest, I'm not really sure what you wanted to say.

answered Sep 19, 2013 at 14:03

Butt4cak3

2,43917 silver badges15 bronze badges

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

1 Comment

Butt4cak3 Over a year ago

@DavidSmith It does. Look at this example I made: jsbin.com/akEHELI/1 | It outputs the links title.

Nick Tomlin · Accepted Answer · 2013-09-19 15:36:12Z

1

This assumes that you want to get the "title" attribute on the anchor, and use it to set the value of the titleText property on your randomtext object:

JS

var randomtext={ titleText:"Some Name"}
// a more specific class name or id would be better suited here
var anchor = document.getElementsByClassName('css')[0];  
randomtext.titleText = anchor.getAttribute('title');

jsFiddle

Update

I'm not sure why you want to include all the of the logic in your object definition, but your current javascript is invalid. If you absolutely must assign a value to the titleText property when you create your randomText object, the following should work:

   var randomtext={ 
     // this immediately invokes a function 
     // which looks for the first anchor
     // and returns it's title attribute
     // that attribute is then assigned to the titleText property
     // on the object.
     titleText:(function () {
         var anchor = document.getElementsByClassName('css')[0];     
         return anchor.getAttribute('title');
     })(),
    title2: "name1",
    title3: "name3",
    title4: "name4",
}

edited Sep 19, 2013 at 15:36

answered Sep 19, 2013 at 14:04

Nick Tomlin

29.4k12 gold badges65 silver badges96 bronze badges

4 Comments

David Smith Over a year ago

You are correct, I would like to take the title from the anchor and use it to set the value of the property in the JS script. I tried both codes and neither of them worked.

Nick Tomlin Over a year ago

The JS code you wrote is invalid. You can either rewrite your code as I have written it in my answer, or wrap it in a iife and return a value that you want assigned to the titleText property. Also, your JS needs to be a. included after the DOM has loaded or b. use a "ready" function to wait until the DOM has loaded.

David Smith Over a year ago

I have no option of rewriting it as it a pretty large code. I was hoping I could insert something after the titletext: that would do it. by adding the following line gets the page title that works. (titleText: document.title,) but I need it to get the anchor title not the page title. You might need to explain the last part I don't understand it

Nick Tomlin Over a year ago

@DavidSmith Sorry if I was unclear. The javascript code that you tried (listed in your edited question) is invalid. You cannot have multiple javascript statements in a property assignment. I've updated my post with a corrected version of your code.

Collectives™ on Stack Overflow

taking the html title to a javascript variable

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related