.hidden not working

Question

I was making a breathing exercise app (please don't mind the poor CSS it's a work in progress), and when I use .hidden it doesn't work. But when I remove all CSS properties from the button, it works fine. Please tell me what's wrong and how to fix the problem.

https://sololearn.com/compiler-playground/Wfrr2z9xMiQB/?ref=app

Answer 1

When using the js tab, it's a good idea to enclose everything inside an onload function. Android Sololearn app users gets an error message otherwise.

One of the issues in your code are your setTimeout functions. Pass the functon name, not string, to setTimeout.

Also, use addEventListener rather than inline function assignment. It's better practice and you don't have to go back and forth between html and js when developing your code.

The hidden attribute for button is quirky. I replaced it with a hidden class instead. Also, I changed the end btn style to refer to an end class instead of end id in css. It's better practice to use classes rather than id in your css.
Also, perhaps the specificity of id is clashing with .hidden, but It fixed the problem I was having with hiding the red button.

I also deleted the btn2.disabled . No need for that if the button is hidden.

https://sololearn.com/compiler-playground/WKJue6QnHb6J/?ref=app

Answer 2

Thank you Bob_Li for fixing it 😄