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.

shre28491193

@strawberry-3.141 Button shows up on the mirror , but still click event doesnt work

shre28491193

I removed all unused elements to see if that was hiding anchor tag. Still no luck.

strawberry 3.141

@shre28491193 I checked out your repository again and remade the changes I posted and it’s working for me, is your problem that you can’t see the button after clicked or does the click don’t work at all?

shre28491193

@strawberry-3-141 It is strange that it works for you. I wonder what i am doing different.

I am able to see the button on my screen but it does not do anything when clicked on it nor changes the cursor to a pointer.

KirAsh4

Hey @strawberry-3-141, have you considered the CSS layers? Could it be possible that something else is overlaid on top of of where the button might be and that’s why @shre28491193 is unable to click on it? I haven’t checked out any of the code nor tried anything, too many things going on at the same time and just too busy, but at the moment, that’s the one thing that came to mind … Set a z-index on the button layer and see what happens.

shre28491193

@KirAsh4 I did give that a try, still no luck. From my understanding z-index is only valid when you are trying to put your element over all other siblings. I am running that button by just itself.

KirAsh4

z-index applies to everything in the DOM element. Just because your button is on a layer all by itself, does not mean there might not be another layer on top of it that you are unaware of. However if you say you tried it (set it to 999?) and no difference, then something else is going on. At the moment I’m just too overloaded with other projects.

shre28491193

I set it to 999 and still the same issue.

No worries , thanks for helping.

cowboysdude

I did find out that if you load this in a module position that currently has a running module in it then it will not work. If you move it to a module position that has NO other module running in it… it works.

shre28491193

Atlast it did work. I moved it to a different position and it worked.