Unable to click a toggle button

shre28491193

I am building a toggle button , two dials and a slider. I am taking help from the simple music player module and it has been super helpful. I have no experience with JS , node or CSS. I am learning as I am doing it.

With just as a proof of concept , I started with the toggle button. I prototyped this button on JSFiddle and it works as it should.Now trying to integrate this into Magic Mirror, Toggle button shows on the mirror but, it fails to do two important things.

cursor change from default to pointer when hovering over the button
Detecting a click event and changing states

Here is the link to my github repository.

Also this is how it is supposed to work - fiddle - link

Please take a look at it and let me know if am doing anything blatantly wrong. I would be happy to learn. Thanks in advance.

Also , let me know if I should post code for review any differently.

strawberry 3.141

@shre28491193

Your problem is that you add the click event after the dom is ready event is fired, but this will never happen, because you add this line after the event already happend, so you don’t add the click event ever.

replace

$(document).ready(function(){
                $("a").click(function(){
			debugger;
	    		Log.info('mouse-click-event');
            		$(this).toggleClass('off');
        	});
	});

with

regenToggle.addEventListener('click', () => {
    Log.info('mouse-click-event');
    regenToggle.classList.toggle("off");
});

then you add the click event immediately to your anchor tag, also you don’t need jquery any longer and so you can remove

    getScripts: function(){
        return ["jquery.js" , "jquery-ui.min.js"];
    },

in the css you have the problem that you set the width of the class hvac to 0px, thats why you will not see the toggle button. change this to a value like in the jsfiddle example.

Furthermore you have a lot of redundant unused variables in your code, but I guess you will use them when you continue with your module. I hope that gives you a little starting boost.

shre28491193

@strawberry-3-141

Thanks for your suggestion. I replaced the snippet for click part of it.

regenToggle.addEventListener(‘click’, () => { - I presume this was meant to be ‘regenToggle.addEventListener(“click” , function() {’

also I changed the width of the HVAC CSS element. I still see the same issue - yet to debug more.

strawberry 3.141

@shre28491193 do you get any error messages in the electron console?

shre28491193

@strawberry-3-141 - Sorry, I am not sure how to access the electron console. Could you direct me to it ?

strawberry 3.141

@shre28491193 press ctrl+shift+i

shre28491193

Got it. Will try this in a few minutes. I am in a meeting at work now.

shre28491193

@strawberry-3-141 No errors in the console. :-(

strawberry 3.141

@shre28491193 so you can see the button, but after a click nothing happens?

shre28491193

Button shows up on the mirror , but still click event doesnt work.