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

[emrhssla]

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’

[sdetweil]

@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", () => {

[sdetweil]

@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