перемещение встроенного JS в отдельный файл - PullRequest
Новая
       47

перемещение встроенного JS в отдельный файл

0 голосов
/ 06 января 2019

У меня есть onmouseover и onclick в моем html, и я хотел бы переместить их в отдельный файл 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); }

и я вообще не знаю, как переместить эти клики в отдельный js.

Спасибо

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Селектор document.getElementsByClassName() вернет массив, даже если у вас есть только один элемент для этого запроса. Вы пытаетесь добавить EventListener в массив, что невозможно. 2 возможных решения:

  • Использование цикла for, если у вас более 1 элемента с классом 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*/

Это должно решить вашу проблему. Прокомментируйте, если вам нужны какие-либо разъяснения.

0 голосов
/ 06 января 2019

Ваша проблема не с файлом, поскольку вы показали, что получаете сообщение от прослушивателя событий.

Причина в том, что getElementsByClassName () возвращает массив. Вы не можете назначить слушателя непосредственно на массив. Вам нужно получить доступ к элементу в массиве и назначить слушателю это. 

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

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

Далее, чтобы добавить его в отдельный файл, просто добавьте эти функции в файл и импортируйте файл в свой HTML.

Например:

Имя файла: test.js

Строка импорта: 

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