用Google Closure编写的事件监听器中的Click事件不能正常工作吗？

Question

I am new to Java Script , My question is when I try this JS in chrome browser console it works, But in my JS file it's not working 我是Java 脚本的新手，我的问题是，当我在chrome浏览器控制台中尝试使用此JS时，它可以工作，但是在我的JS文件中，它不起作用

I attached the code, For HTML design I used google MDL, For JS I used Google Closure 我附上了代码，对于HTML设计，我使用了Google MDL，对于JS，我使用了Google Closure

HTML : 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: 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");
    });
};

What is wrong with this code 此代码有什么问题

When I try without goog.provide and goog.require its show error to all 当我尝试不使用goog.provide和goog.require向所有人显示错误时
When I use this there is no reaction to the click event 当我使用此按钮时，对点击事件没有任何反应
Is there any other best resource to see online 还有其他最好的资源可以在线观看

Kindly help me 请帮助我

Answer 1

So there's a few things I'd change here. 因此，我将在此处进行一些更改。

The biggest issue is that you're never calling sample.add or sample.add.bindEvent. 最大的问题是您永远不会调用sample.add或sample.add.bindEvent。

Then, your script will have to be moved to below your button, so that the button will be on the page when your script runs. 然后，必须将脚本移动到按钮下方，以便在脚本运行时该按钮位于页面上。 Or you could use JS to delay the script running, up to you, but I will say, its pretty common to see scripts just before the end of the body tag. 或者，您可以使用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>

Also, I'd ditch the goog.base call, unless you specifically need that. 另外，除非您特别需要，否则我将放弃goog.base调用。 If you do need that, please explain why and maybe we can help. 如果确实需要，请说明原因，也许我们可以提供帮助。

Finally we just need a few subtle tweaks; 最后，我们只需要一些细微的调整即可；

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();

I suppose you could call sample.add.bindEvent directly, but I felt like this was probably just the first step to something larger and you'd want to go this way. 我想您可以直接调用sample.add.bindEvent，但是我觉得这可能只是迈向更大的第一步，您想这样做。

用Google Closure编写的事件监听器中的Click事件不能正常工作吗？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-09-24 15:31:47

用Google Closure编写的事件监听器中的Click事件不能正常工作吗？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-09-24 15:31:47

解决方案1
2 已采纳 2018-09-24 15:31:47