Need help sending a notification after a click event

[jason02]

Hi All,

I have a button on my magic mirror. When I click the button, I want it to send a notification to another module so that it can perform an action.

Here’s a snippet of what I have so far, sorry if i’m way off, not really great at javascript :S

getDom: function() {
	var wrapper = document.createElement("div");
	var button = document.createElement("div");	
        var text = document.createElement("span");	
         text.innerHTML = 'click me';
        button.appendChild(text);
	wrapper.appendChild(button);

	$(button).on("click", function(){
                      this.sendNotification("BUTTON_PRESSED", {});
	});
             return wrapper;
            }
     });

When I execute this code, I get an error, ‘this.sendNotification is not a function’. So obviously I’m trying to call that function when it is not in scope. But I don’t really know of another way to wire up the button click to the send notification function. Any ideas anyone?

Thanks!

[broberg]

A button connected to the gpio of the raspberry?

Then you’ll need either the MMM-button or MMM-buttons modules to read the state from the gpio.

[jason02]

Actually this isn’t a button connected to the gpio of the raspberry. This is literally a button displayed on the screen of the raspberry pi

[broberg]

Ohh okey,
I’m no coder myself, but,

Try this one :

getDom: function() {

        var self = this;
	var wrapper = document.createElement("div");
        var text = document.createElement("span");	
        text.innerHTML = 'click me';
        text.addEventListener("click", () => button());

	function button(){
             self.sendNotification("BUTTON_PRESSED", {});
             text.innerHTML = "You clicked me!";
	};

        return wrapper;
        }
   });

I’m at work so I can’t try this right now, but, give it a go

[jason02]

Thanks for your input, I modified it a bit to get the result I wanted! Works like a charm!

getDom: function() {
	var wrapper = document.createElement("div");
	var button = document.createElement("div");
	var text = document.createElement("span");
	var hidden = true;		
	button.className = "hide-toggle";
	text.innerHTML = this.config.caption;
	text.addEventListener("click", () => this.sendNotification("BUTTON_PRESSED", {}));
  button.appendChild(text);
  wrapper.appendChild(button);
	return wrapper;
}