1

我是 Java Script新手，我的问题是当我在 chrome 浏览器控制台中尝试这个 JS 时它可以工作，但是在我的 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. 有没有其他最好的资源可以在线查看

请帮助我

4

1 回答 1

2

所以我要在这里改变一些事情。

最大的问题是您永远不会调用 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，但我觉得这可能只是迈向更大的第一步，你会想走这条路。

于 2018-09-24T15:31:47.647 回答