本地html文件不会运行javascript(在任何浏览器上）

Local html file wont run javascript (on any browser)

本文关键字：任何 浏览器 javascript 文件 html 运行 本地      更新时间：2023-09-26

我尝试在谷歌上搜索，但我不确定找到的任何问题是否真的与我的问题有关。

这很简单。我的PC上有一个html文件，屏幕上只有一个按钮。

我有一个.css文件的链接，与我的html位于同一文件夹中。.css效果很好。颜色和形状的属性正在起作用。

我还有一个.js文件，其中包含一个代码，应该在这个按钮上产生淡出淡入效果。

我正在 codecademy.com 上学习HTML（和其他东西）。他们在那里有一个测试环境，我的代码运行良好。

但是在本地（如我所描述的）javascript代码不会运行。无淡出-淡入效果。

我尝试了不同的浏览器（Chrome，IE，Edge...）没有交易。还试图打开IE上的所有安全性，允许活动内容和许多其他项目。

以下是我来自html，.css和js的代码：

HTML file (name of the file botao.html):
 <title> Button Magic </title>
     <link rel='stylesheet' type='text/css' href='stylebotao.css' >
     <script type='text/javascript' src='script.js'> </script>
 </head>
 <body>
     <div>  <br/>  strong Click me! </strong>  </div>
 </body>
 </html>

CSS 文件 （文件名 stylebotao.css）

div  {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}

Javascript文件（文件脚本的名称，js）

$('div').mouseenter(function(){$(this).fadeTo('fast',1)});
$('div').mouseleave(function(){$(this).fadeTo('fast',0.1)})

我能做些什么呢？

我的猜测是你没有包含jQuery，所以没有定义$选择器。因此，当您尝试$('div').mouseenter(function(){$(this).fadeTo('fast',1)});时，它会给出一个错误，告诉您$不是函数（如果您打开控制台，您将能够看到）。因此，解决方案是使用纯javascript或在脚本之前包含jquery。

顺便说一句：最好在 DOM 完全加载后运行你的 JavaScript，这样你就可以确保你在代码运行时引用的元素在那里。在jquery中，你可以这样做：

$(function () {
    //your code here
});

你必须包含 jQuery file/cdn。CDN此外，请尝试使用正文标签底部的脚本，除非您知道自己在做什么。

$( document ).ready(function() {
     //YOUR CODE HERE
  });

相关文章：