时间戳

首页 > 解决方案 > 外部 JavaScript 文件不会更新 HTML 元素属性

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

问题描述

我在同一目录中有一个 HTML 文件和一个 JavaScript 文件。我在 JS 文件中有变量，专门用于更方便地访问修改。我的目标是让页面加载这些变量并使用它们来更改元素属性。在 Inspect Element 中，如果我单击 <head> 标记中的 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;
}

标签： javascripthtml

解决方案

这是一个修复了问题的代码片段，它documents.getElementsByName()返回一个元素数组，即使页面中只有一个具有该名称的元素。

因此，知道这一点，您可以只引用第一个元素document.getElementsByName('name')[0]

但说实话，这里更好的设计是用id属性代替name, 和对应的document.getElementById('id'). id应该是唯一的，因此document.getElementById()只返回一个元素，你可以像你想要的那样直接使用它。

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>

推荐阅读