मैं जावा के लिए नया हूँ

मैंने कोड संलग्न किया, HTML डिज़ाइन के लिए मैंने google MDL का उपयोग किया, JS के लिए मैंने Google क्लोजर का उपयोग किया

एचटीएमएल:

<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>

जेएस:

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
KASIVISWANATHAN 23 सितंबर 2018, 07:53

1 उत्तर

सबसे बढ़िया उत्तर

तो यहां कुछ चीजें हैं जिन्हें मैं यहां बदलूंगा।

सबसे बड़ी समस्या यह है कि आप कभी भी sample.add या sample.add.bindEvent को कॉल नहीं कर रहे हैं।

फिर, आपकी स्क्रिप्ट को आपके बटन के नीचे ले जाना होगा, ताकि जब आपकी स्क्रिप्ट चलती है तो बटन पृष्ठ पर होगा। या आप स्क्रिप्ट चलाने में देरी करने के लिए जेएस का उपयोग कर सकते हैं, लेकिन मैं कहूंगा, बॉडी टैग के अंत से ठीक पहले स्क्रिप्ट देखना बहुत आम है।

<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 को कॉल कर सकते हैं, लेकिन मुझे लगा कि यह शायद कुछ बड़ा करने के लिए पहला कदम था और आप इस तरह से जाना चाहेंगे।

2
Graham P Heath 24 सितंबर 2018, 18:31