External JavaScript file will not update HTML element attributes

Question

I have an HTML file, and a JavaScript file in the same directory. I have variables in the JS file specifically for easier access to modify. My goal is to have the page load those variables and use them to change element attributes. In Inspect Element, if I click the JavaScript reference in the < head > tag, it takes me to the JavaScript file as it should, so I don't understand why the HTML file won't load it. I feel like there's something small that I'm missing so if you could point it out for me, that would be great. Thanks.

links.html

<!DOCTYPE html>
<html>    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Lil Ses &amp; Rony</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <link rel="stylesheet" href="links.css">
        <script type="text/javascript" src="https://linkupapp.org/links.js"></script>
    </head>
    <body onload="jsUpdate()">

        <!-- Logo -->
        <img class="logo" src="links logo.jpg" />

        <!-- Name -->
        <h2>Lil Ses & Rony</h2>

        <a name="spotify" href="">no value</a>
        <a name="appleMusic" href="">no value</a>
        <a name="youTube" href="">no value</a>
        <a name="soundCloud" href="">no value</a>
        <a name="twitter" href="">no value</a>

    </body>
</html>

links.js

var songTitle = "Runaway";
var spotify = "spotify:track:1TsKB26M4Tz2JrC56uZo2z";
var appleMusic = "https://music.apple.com/ca/album/runaway/1502683420?i=1502683423";
var youTube = "https://youtu.be/3Zmm4e3ysjY";
var soundCloud = "https://soundcloud.com/user-887966595/runaway-prod-secret";
var twitter = "https://www.twitter.com/lilsesandrony";

var links = {
    spotify : {
        title : songTitle + " (Spotify)",
        link : spotify
    },

    appleMusic : {
        title : songTitle + " (Apple Music)",
        link : appleMusic
    },

    youTube : {
        title : songTitle + " (YouTube)",
        link : youTube
    },

    soundCloud : {
        title : songTitle + " (SoundCloud)",
        link : soundCloud
    },

    twitter : {
        title : "Twitter",
        link : twitter
    }
};

function jsUpdate() {
    var ref = {
        spotify : document.getElementsByName("spotify"),
        appleMusic : document.getElementsByName("appleMusic"),
        youTube : document.getElementsByName("youTube"),
        soundCloud : document.getElementsByName("soundCloud"),
        twitter : document.getElementsByName("twitter"),
    };

    ref.spotify.innerHtml = links.spotify.title;
    ref.spotify.href = links.spotify.link;

    ref.appleMusic.innerHtml = links.appleMusic.title;
    ref.appleMusic.href = links.appleMusic.link;

    ref.youTube.innerHtml = links.youTube.title;
    ref.youTube.href = links.youTube.link;

    ref.soundCloud.innerHtml = links.soundCloud.title;
    ref.soundCloud.href = links.soundCloud.link;

    ref.twitter.innerHtml = links.twitter.title;
    ref.twitter.href = links.twitter.link;
}

Does this answer your question? What do querySelectorAll and getElementsBy* methods return? — Heretic Monkey
– Heretic Monkey, Commented May 23, 2020 at 21:29

Marco · Accepted Answer · 2020-05-23 21:12:04Z

1

getElementsByName returns an array so replace

var ref = {
    spotify : document.getElementsByName("spotify"),
    appleMusic : document.getElementsByName("appleMusic"),
    youTube : document.getElementsByName("youTube"),
    soundCloud : document.getElementsByName("soundCloud"),
    twitter : document.getElementsByName("twitter"),
};

With

var ref = {
    spotify : document.getElementsByName("spotify")[0],
    appleMusic : document.getElementsByName("appleMusic")[0],
    youTube : document.getElementsByName("youTube")[0],
    soundCloud : document.getElementsByName("soundCloud")[0],
    twitter : document.getElementsByName("twitter")[0],
};

Also it's innerHTML and not innerHtml.

You can vastly improve your code by using document.getElementById and a for loop instead of document.getElementsByName:

function jsUpdate() {
    for (var service in links) {
        var el = document.getElementById(service)

        el.innerHTML = links[service].title
        el.href = links[service].link
    }
}

And HTML:

<a id="spotify" href="">no value</a>
<a id="appleMusic" href="">no value</a>
<a id="youTube" href="">no value</a>
<a id="soundCloud" href="">no value</a>
<a id="twitter" href="">no value</a>

edited May 23, 2020 at 21:12

answered May 23, 2020 at 20:57

Marco

7,2863 gold badges22 silver badges56 bronze badges

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

1 Comment

Tibbelit Over a year ago

Using id instead of name to target elements might be better in this case, since you don't want a collection.

davnicwil · Accepted Answer · 2020-05-23 21:03:52Z

Here's a code snippet with the issue fixed, which is that documents.getElementsByName() returns an array of elements, even when there is only one in the page with that name.

Therefore, knowing this, you can just reference the first element with document.getElementsByName('name')[0]

But to be honest, a better design here is to use the id attribute instead of name, and the corresponding document.getElementById('id'). id is supposed to be unique, therefore document.getElementById() only returns a single element that you can just use straight away like you wanted to.

var songTitle = "Runaway";
var spotify = "spotify:track:1TsKB26M4Tz2JrC56uZo2z";
var appleMusic = "https://music.apple.com/ca/album/runaway/1502683420?i=1502683423";
var youTube = "https://youtu.be/3Zmm4e3ysjY";
var soundCloud = "https://soundcloud.com/user-887966595/runaway-prod-secret";
var twitter = "https://www.twitter.com/lilsesandrony";

var links = {
    spotify : {
        title : songTitle + " (Spotify)",
        link : spotify
    },

    appleMusic : {
        title : songTitle + " (Apple Music)",
        link : appleMusic
    },

    youTube : {
        title : songTitle + " (YouTube)",
        link : youTube
    },

    soundCloud : {
        title : songTitle + " (SoundCloud)",
        link : soundCloud
    },

    twitter : {
        title : "Twitter",
        link : twitter
    }
};


  var ref = {
      spotify : document.getElementsByName("spotify")[0],
      appleMusic : document.getElementsByName("appleMusic")[0],
      youTube : document.getElementsByName("youTube")[0],
      soundCloud : document.getElementsByName("soundCloud")[0],
      twitter : document.getElementsByName("twitter")[0],
  };

  ref.spotify.innerHTML = links.spotify.title;
  ref.spotify.href = links.spotify.link;

  ref.appleMusic.innerHTML = links.appleMusic.title;
  ref.appleMusic.href = links.appleMusic.link;

  ref.youTube.innerHTML = links.youTube.title;
  ref.youTube.href = links.youTube.link;

  ref.soundCloud.innerHTML = links.soundCloud.title;
  ref.soundCloud.href = links.soundCloud.link;

  ref.twitter.innerHTML = links.twitter.title;
  ref.twitter.href = links.twitter.link;

<a name="spotify" href="">no value</a>
<a name="appleMusic" href="">no value</a>
<a name="youTube" href="">no value</a>
<a name="soundCloud" href="">no value</a>
<a name="twitter" href="">no value</a>

Thank you. marco-a's answer provided more detail regarding a second mistake I made. I appreciate your help though.

Collectives™ on Stack Overflow

External JavaScript file will not update HTML element attributes

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related