CODEWITHSUNDEEP
javascriptdom
Todd Kramer
Todd Kramer

Reputation: 1

Define a function that updates the <title>attribute of a webpage

Here is what I am tasked with:

Define a function named titleLinks. Upon being called, the titleLinks function shall update the title attribute of every link on the current page to the following: This is a link to: href

Here is what I have so far:

function titleLinks(){
    var table = document.getElementsByTagName('title'); //gets array-like list of titles
    for (let i = 0; i < table.length; i++) {
        titleLinks[i]
        console.log "This is a link to:" <href>
    }

Also; I know basically how to use chrome developer tool to see what happens but how do I invoke this once I get it coded correctly?

Upvotes: 0

Views: 49

Answers (1)

Sam
Sam

Reputation: 176

You are on the right track. Couple of changes.

Instead of document.getElementsByTagName('title'); you want links (<a> element). The <title> element goes in the <head> once, and defines the title of the page.

Once you have the links, you can use .getAttribute('href'); to get the href.

Then to apply your new title, you can use .setAttribute('title', 'your value')

Full example:

function titleLinks() {
    let table = document.getElementsByTagName('a'); //gets array-like list of links
    for (let i = 0; i < table.length; i++) {
      let thisHref = table[i].getAttribute('href')
      table[i].setAttribute('title', "This is a link to:" + thisHref);
    }
}

To call the function in your code you can then use titleLinks(); you can also type that into console to run your function (if you have already defined it in a .js file or in console.)

Documentation:

Upvotes: 1

Related Questions