HTML不识别外部JS文件功能

Question

我想创建一个简单的 JS 函数，在其中单击一个按钮，背景变为该按钮的颜色。 我使用了外部 JS 文件，但即使我使用了该函数，它仍显示此错误：'changecolor' 已定义但从未使用过。 这是代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>JavaScript Background Color Switcher</title>
</head>
<body>
    <div class="canvas">
        <h1>Color Scheme Switcher</h1>
        <span onclick="changecolor('grey')" class="button" id="grey"></span>
        <span onclick="changecolor('white')" class="button" id="white"></span>
        <span onclick="changecolor('blue')" class="button" id="blue"></span>
        <span onclick="changecolor('yellow')" class="button" id="yellow"></span>
    </div>
    <script src="app.js"></script>   
</body>
</html> 

JS file:
function changecolor (id) {
  document.body.style.background = document.getElementById(id).innerHTML
}

Answer 1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>JavaScript Background Color Switcher</title>
</head>
<body>
    <div class="canvas">
        <h1>Color Scheme Switcher</h1>
        <span onclick="changecolor('grey')" class="button" id="grey"></span>
        <span onclick="changecolor('white')" class="button" id="white"></span>
        <span onclick="changecolor('blue')" class="button" id="blue"></span>
        <span onclick="changecolor('yellow')" class="button" id="yellow"></span>
    </div>
    <script src="app.js"></script>   
</body>
</html> 

JS file:
function changecolor (id) {
  document.body.style.background = id;
}

现在告诉我它是否有效:)

Answer 2

将脚本标签移动到 head 部分。 或者至少在使用之前放置函数声明（将脚本标记移动到正文的最顶部）。

Answer 3

确保在包含 JS 文件的正文末尾使用脚本标记。 并且要使用 JS 文件的功能，您应该在文件的包含范围内使用它们。 这是推荐的方法。

Answer 4

您的标签大于标记位于错误的位置。 紧随其后移动它

Answer 5

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>JavaScript Background Color Switcher</title>
</head>
<body>
    <div class="canvas">
        <h1>Color Scheme Switcher</h1>
        <div id="switch"><!--dont delete this div its here to avoid js to select all elements with class button -->
          <span class="button" id="grey"></span>
          <span class="button" id="white"></span>
          <span class="button" id="blue"></span>
          <span class="button" id="yellow"></span>
        </div>
    </div>
    <script src="app.js"></script>   
</body>
</html>

JS文件：

function changecolor(id) {
  document.body.style.background = id;
}
var rootElem = document.querySelector("#switch");
var buttonArr = rootElem.querySelectorAll(".button");
for (let i = 0; i < buttonArr.length; i++){
   buttonArr[i].addEventListener('click', function(){
       changecolor(buttonArr[i].id);
   }
}

只需在按钮的 id 中删除颜色的名称或十六进制，然后添加任意数量的按钮

警告不要删除带有 id 开关的 div 并且不要改变用于切换颜色的按钮的类别

HTML不识别外部JS文件功能

问题描述

5 个解决方案

解决方案1
1 已采纳 2020-03-06 07:32:28

解决方案2
0 2020-03-06 07:16:23

解决方案3
0 2020-03-06 07:21:02

解决方案4
0 2020-03-06 07:23:38

解决方案5
0 2020-03-06 09:22:36

HTML不识别外部JS文件功能

问题描述

5 个解决方案

解决方案1 1 已采纳 2020-03-06 07:32:28

解决方案2 0 2020-03-06 07:16:23

解决方案3 0 2020-03-06 07:21:02

解决方案4 0 2020-03-06 07:23:38

解决方案5 0 2020-03-06 09:22:36

解决方案1
1 已采纳 2020-03-06 07:32:28

解决方案2
0 2020-03-06 07:16:23

解决方案3
0 2020-03-06 07:21:02

解决方案4
0 2020-03-06 07:23:38

解决方案5
0 2020-03-06 09:22:36