Событие клика в приемнике событий, написанном в Google Closure, не работает? - PullRequest
Новая
       50

Событие клика в приемнике событий, написанном в Google Closure, не работает?

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

Я новичок в Java Сценарий , Мой вопрос: когда я пробую этот JS в консоли браузера Chrome, он работает, но в моем файле JS он не работает

Я прикрепил код,Для HTML-дизайна я использовал Google MDL, для JS я использовал Google Closure

HTML: 

<HTML>
 <head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/add.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <div>
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
       <i class="material-icons">add</i>
     </button>
   </div>
</body>
</HTML>

JS: 

goog.provide('sample.add');

goog.require('goog.dom');
goog.require('goog.events');

sample.add = function() {
    self = this;
};
goog.inherits(sample.add, goog.base);
sample.add.prototype.bindEvent = function() {
    goog.events.listen(goog.dom.getElement('add'),
         goog.events.EventType.CLICK, function(e) {
            alert("HAPPY");
    });
};

Что такоенеправильно с этим кодом

  1. Когда я пытаюсь без goog.provide и goog.require его ошибка показа для всех
  2. Когда я использую это, нет реакции на событие нажатия
  3. Есть ли другой лучший ресурс для просмотра в Интернете

Пожалуйста, помогите мне

1 Ответ

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

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

Самая большая проблема в том, что вы никогда не вызываете sample.add или sample.add.bindEvent.

Затем ваш скриптнужно будет переместить ниже вашей кнопки, чтобы кнопка была на странице при запуске вашего скрипта.Или вы можете использовать JS для задержки запуска скрипта, но я скажу, что довольно часто можно увидеть скрипты непосредственно перед концом тега body. 

<HTML>
 <head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <div>
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
       <i class="material-icons">add</i>
     </button>
   </div>
   <script src="../js/add.js"></script>
</body>
</HTML>

Кроме того, я бы бросилвызов goog.base, если вам это не нужно.Если вам это нужно, пожалуйста, объясните, почему, и, возможно, мы можем помочь.

Наконец, нам просто нужно несколько тонких настроек; 

goog.provide('sample.add');

goog.require('goog.dom');
goog.require('goog.events');
/** @export */
sample.add = function() {
    self = this;
    self.bindEvent();
};
sample.add.prototype.bindEvent = function() {
    goog.events.listen(goog.dom.getElement('add'),
         goog.events.EventType.CLICK, function(e) {
            alert("HAPPY");
    });
};
sample.add();

Я полагаю, вы можете напрямую вызвать sample.add.bindEvent, но я чувствовал, что это, вероятно, был только первый шаг к чему-то большему, и вы захотите пойти по этому пути.

...