Stackblitz: onClick не находит мою функцию - PullRequest
Новая
       16

Stackblitz: onClick не находит мою функцию

0 голосов
/ 08 сентября 2018

У меня в качестве основного onClick в кнопке, которая выводит предупреждение 

function test(){
  alert('here');
}
<button onClick="test()">Press</button>

В StackBlitz это не работает - https://stackblitz.com/edit/js-umarwe?embed=1&file=index.js&hideNavigation=1

Это из-за ES6

Как это работает в ES6

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

Почему это не работает

Причины, по которым он не работает, заключаются в том, что за Stackblitz существует система создания активов, которая обрабатывает ваш код Javascript как modules .

Это означает, что переменные, определенные в этих модулях, доступны только внутри этих модулей и не становятся присоединенными к глобальному пространству имен (как вы ожидали и, кажется, привыкли).

Минимум, необходимый для его исправления

Для этого вам нужно явно присоединить эти переменные к глобальному объекту , который внутри браузера выглядит как window.

Простое добавление следующей строки в конец файла index.js заставит ваш код работать: 

window.test = test;

лучший способ

Обратите внимание, что использование встроенных обработчиков событий непосредственно на элементе (например, onclick) считается плохой практикой (и имеет практические недостатки, но это может привести к слишком серьезным последствиям). Вместо этого вы должны использовать функцию Javascripts Element.prototype.addEventlistener(). Шаги, чтобы добраться туда:

Добавьте id к вашей кнопке, чтобы ваш Javascript мог ее найти: 

<button id="testButton">Press</button>

Затем поместите этот элемент в переменную: 

var button = document.getElementById('testButton');

Последний шаг: добавьте прослушиватель событий для события click: 

button.addEventListener('click', test)

Вот полная index.js для этой измененной версии: 

// Import stylesheets
import './style.css';
function test(){
  alert('here');
}

var button = document.getElementById('testButton');
button.addEventListener('click', test);

Как сделать его еще безопаснее и лучше

Еще одно примечание: если вы поместите тег скрипта, загружающий Javascript, в раздел head документа, вам нужно либо добавить атрибут defer к тегу, либо обернуть часть кода, которая должна получить доступ к DOM в обработчике событий DOMContentLoaded: 

// Import stylesheets
import './style.css';
function test(){
  alert('here');
}

document.addEventListener('DOMContentLoaded', function () {
  var button = document.getElementById('testButton');
  button.addEventListener('click', test);
}

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

0 голосов
/ 08 сентября 2018

Изменить тестовая функция объявление в index.js файл: 

window.test = function(){
  alert('here');
}

Он не распознает тестовую функцию по событию щелчка, потому что объявленная вами тестовая функция находится не в той же области действия.

0 голосов
/ 08 сентября 2018

Вы можете сделать это. 

window.test = () =>{
  alert('here');
}

Я не знаю stackBlitz ..

но, я понимаю, загрузка index.js

так window.test = () => {} ...

...