MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

How can I run console.log("text") when I click on an image?



  • MMM-imageSlideshow
    Only some of the codes in MMM-imageSlideshow were added.

    Module.register("MMM-BeforeImage", {
    
    	// Default module config.
    
    	defaults: {
                        ~~
    	},
    
        // load function
    
    	start: function () {
    
                ~~
    
    	},
    
    	// Define required scripts.
    
    	getStyles: function() {
                  ~~
    	},    
    
    	// the socket handler
    
    	socketNotificationReceived: function(notification, payload) {
                ~~
        },    
    
    	// Override dom generator.
    
    	getDom: function () {
    
    		var wrapper = document.createElement("div");
    
            // if an error, say so (currently no errors can occur)
    
            if (this.errorMessage != null) {
    
                wrapper.innerHTML = this.errorMessage;
    
            }
    
            // if no errors
    
            else {
    
                // if the image list has been loaded
    
                if (this.loaded === true) {
    
    				// if was delayed until restart, reset index reset timer
    
    				if (this.imageIndex == -2) {
    
    					this.imageIndex = -1;
    
    					clearInterval(this.interval);
    
    					var self = this;
    
    					this.interval = setInterval(function() {
    
    						self.updateDom(0);
    
    						}, this.config.slideshowSpeed);						
    
    				}				
    
                    // iterate the image list index
    
                    this.imageIndex += 1;
    
    				// set flag to show stuff
    
    				var showSomething = true;
    
                    // if exceeded the size of the list, go back to zero
    
                    if (this.imageIndex == this.imageList.length) {
    
                                           // console.log("MMM-ImageSlideshow sending reload request");
    
    				       // reload image list at end of iteration, if config option set
    
                                           if (this.config.reloadImageList) 
    
                                               this.sendSocketNotification('IMAGESLIDESHOW_RELOAD_FILELIST', this.config);
    
    
    
    					// if delay after last image, set to wait
    
    					if (this.config.delayUntilRestart > 0) {
    
    						this.imageIndex = -2;
    
    						wrapper.innerHTML = " ";
    
    						showSomething = false;
    
    						clearInterval(this.interval);
    
    						var self = this;
    
    						this.interval = setInterval(function() {
    
    							self.updateDom(0);
    
    							}, this.config.delayUntilRestart);									
    
    					}
    
    					// if not reset index
    
    					else
    
    						this.imageIndex = 0;
    
    				}
    
    				if (showSomething) {
    
    					// create the image dom bit
    
    					var image = document.createElement("img");
      //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ adding this code @@@@@@@@@@@@@@@@@@@@@@@@@@@@
    					image.id="imgid";
    					
                                            var elemimg = document.getElementById("imgid")
                                                  elemimg.addEventListener("click", () => {
                                                    
                                                    console.log(" click success !")
                                                          
                                                  }) 
     //@@@@@@@@@@@@@@@@@@@@@@@@@@@ adding this code @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                                           // if set to make grayscale, flag the class set in the .css file
    					if (this.config.makeImagesGrayscale)
    
    						image.className = "desaturate";
    
    					// create an empty string
    
    					var styleString = '';
    
    					// if width or height or non-zero, add them to the style string
    
    					if (this.config.fixedImageWidth != 0)
    
    						styleString += 'width:' + this.config.fixedImageWidth + 'px;';
    
    					if (this.config.fixedImageHeight != 0)
    
    						styleString += 'height:' + this.config.fixedImageHeight + 'px;';
    
    					// if style string has antyhing, set it
    
    					if (styleString != '')
    
    						image.style = styleString;
    
    					// set the image location
    					
    					// ad the image to the dom
    					//var elem = document.getElementById("imageclick")
    					
    					
    					wrapper.appendChild(image);					
    
    				}
    
                }
    
                else {
    
                    // if no data loaded yet, empty html
    
                    wrapper.innerHTML = " ";
    
                }
    
            }
    		
            // return the dom
    
    		return wrapper;
    
    	},
    	
    
    });
    

    but Console show ‘Uncaught TypeError : Cannot read property ‘addEventListener’ of null’



  • @emrhssla said in How can I run console.log(“text”) when I click on an image?:

    var elemimg = document.getElementById(“imgid”)
    elemimg.addEventListener(“click”, () => {

    because the getDom() function has not returned the new content to be added to the dom, you cannot search the dom to find it YET… cause its only in memory for your module…

    i always want this routine to be called getDomContribution(), cause thats what it does. it gets this modules content contrubition to the single web page… on return, the MM runtime will then insert the content in the position the module is defined in.

    but, you don’t need to search… you have it already

    var image = document.createElement("img");
      //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ adding this code @@@@@@@@@@@@@@@@@@@@@@@@@@@@
    					image.id="imgid";
    					image.addEventListener("click", () => {
    


  • @emrhssla also, on the module side, logging is Log.log() instead of console.log()
    then u open the developers window, and select the console tab…

    currently there is no mechanism to show both parts of a module in the same place
    node_helper = console.log() - shows in terminal window
    module.js = Log.log() - shows in developers window, console tab


Log in to reply