Question

我的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);

console.log（图片）

log是：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中。

谢谢

Answer 1

您的问题与文件无关，如您所显示的，您从事件侦听器中收到错误。

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

接下来，要将其添加到单独的文件中，只需将这些功能添加到文件中，然后将该文件导入html中即可。

例如：

文件名：test.js

导入行：

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

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

Answer 2

document.getElementsByClassName()选择器将返回一个数组，即使您只有一个适合该查询的元素也是如此。您试图在数组中添加EventListener，这是不可能的。两种可能的解决方案是：

如果您的for类有多个元素，请使用pic循环：

let picture = document.getElementsByClassName("pic");
for(let pictureEl of picture) //You can use any loop that you find most convenient
     pictureEl.addEventListener("mouseover", function( event ) { pictureEl.src='img/cacti.jpeg'; }, false);

选择数组的第一个元素。这样，您将可以与该特定div一起使用。只需在查询中添加一些内容即可。

let picture = document.getElementsByClassName("pic")[0]; /*Since we are dealing with an array, index 0 represents its first element*/

这应该可以解决您的问题。如果您需要任何说明，请发表评论。

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

2 个答案: