外部JavaScript文件不会更新HTML元素属性

由 发布于 javascripthtml
 收藏

我在同一目录中有一个HTML文件和一个JavaScript文件。我在JS文件中有一些变量，专门用于更轻松地进行修改。我的目标是让页面加载这些变量并使用它们来更改元素属性。在Inspect Element中，如果单击标记中的JavaScript引用，它将带我到应有的JavaScript文件，因此我不明白为什么HTML文件不会加载它。我觉得我缺少一些小东西，所以如果您能为我指出这一点，那就太好了。谢谢。

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;
}

如果需要访问它们，可以在这里找到实际的文档：

HTML

JavaScript