时间戳

首页 > 解决方案 > 将内联 js 移动到单独的文件

javascript - 将内联 js 移动到单独的文件

问题描述

我的 html 中有 onmouseover 和 onclick，我想将它们移动到单独的 js 文件（在 js 文件夹中）。

使用 onmouseover 我确实尝试过，但是我无法使其工作。它应该（仅一次）从 img/cacti-edit.jpg 更改为 img/cacti.jpeg。我的 html ：

<div class="pic"> 
<img src="img/cacti-edit.jpg" alt="close-up of a cactus and its spikes"/>
</div>

我的js：

let picture = document.getElementsByClassName("pic");

picture.addEventListener("mouseover", function( event ) { picture.src='img/cacti.jpeg'; }, false);

控制台日志（图片）

日志是：TypeError：picture.addEventListener 不是函数。

HTML：

<ul>
    <li onclick="swapStyleSheet('css/fixed.css')">Fixed width</li>
    <li onclick="swapStyleSheet('css/responsive.css')">Responsive</li>
</ul>

在JS中我有：

function swapStyleSheet(sheet) { document.getElementById("pagestyle").setAttribute("href", sheet); }

而且我根本不知道如何将这个 onclicks 移动到单独的 js 中。

谢谢

标签： javascripthtmlonclickonmouseover

解决方案

您的问题不在于文件，因为您已经表明您从事件侦听器收到错误。

原因是 getElementsByClassName() 返回一个数组。您不能将侦听器直接分配给数组。您需要访问数组中的一个元素并将侦听器分配给它。

let picture = document.getElementsByClassName("pic");

picture[0].addEventListener("mouseover", function( event ) { 
picture.src='img/cacti.jpeg'; }, false);

接下来，要将其添加到单独的文件中，只需将这些函数添加到文件中并将文件导入到您的 html.xml 文件中。

例如：

文件名：test.js

进口线路：

<script src="test.js" type="text/javascript">

推荐阅读