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?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, May 23 '20 at 21:29

Marco · Accepted Answer · 2020-05-23T21:12:04.267

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>

Using id instead of name to target elements might be better in this case, since you don't want a collection. — Tibbelit, May 23 '20 at 21:00

score 1 · Answer 2 · answered May 23 '20 at 21:03

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. — Aptyxx, May 24 '20 at 22:10

External JavaScript file will not update HTML element attributes

2 Answers2