MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    3 Posts 2 Posters 599 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E Offline
      emrhssla
      last edited by 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’

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil
        last edited by 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", () => {
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Away
          sdetweil @emrhssla
          last edited by

          @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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy