How do I change the class of a tag upon the end of a timer and a press of an image? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How do I change the class of a tag upon the end of a timer and a press of an image?

A site has TOS, I want to have a "Confirmation" button When people load the page a timer that consists of 10 minutes starts counting down If the button was pressed before it ends I want it to change the value of "Confirm" to "Hidden" and "Hidden-Message" to "Message"> <img src="https://actual.url.com" class="Confirm"> <p class="Hidden-Message">Please read the TOS, Confirm button will show up in </p> <!--timer --> And when the timer ends I want "Hidden" and "Confirm" to go turn into "Confirm2" How?

6th May 2018, 10:57 AM
Ammar Naif
Ammar Naif - avatar
4 Answers
+ 1
Welcome back. There are a bunch of suggestions and alternatives listed here. Which "it" are you referring to?
26th Sep 2018, 7:45 AM
Janningā­
Janningā­ - avatar
0
There's a lot here, but firstly, I noticed that JavaScript wasn't among the tags for this post. Dynamically changing classes of HTML elements would be a good use case for JavaScript. Secondly, it sounds like you want the image to act like a button, but didn't describe what the button should do as far as user experience is concerned (only what classes you want applied depending on the timer's value), so I would default to wrapping the image element in a button element (like <button><img ...></button>) or moving the image to the button's CSS. However, if I knew more, I might make a different recommendation. Thirdly, it's not clear what the classes are supposed to do, once applied. If the "Confirm" image/button will actually be hidden once clicked (as in disappear as far as the user is concerned) this seems like it will be a very confusing experience for the user. Perhaps it should be grayed out and disabled instead until the timer is up instead of vanishing when pressed. [I've hit my character limit ...]
13th Jun 2018, 12:08 PM
Janningā­
Janningā­ - avatar
0
[...Continued from before.] Fourthly, an alert might be better than a revealed paragraph for the user-error type message. Fifthly, ten minutes is a long time if the user values their time over being informed about their legal responsibilities. I feel like they are either going to read the ToS or not, but having a long timer won't encourage them to read any more than having a much shorter timer (or having a scroll-to-bottom deal). Ten minutes is quite long enough to find something else to do or some other site to navigate to entirely. (Inversely, some websites have 10-minute time-outs for their ToS, which is also a bad practice when most ToSs take way longer than 10 minutes for anyone who actually wanted to read them.) Finally, there are complicated ways of hiding/displaying elements conditionally in CSS, but I'm fairly certain there isn't a <timer> element in HTML, so you would most likely be using JavaScript anyway. If you have any additional questions, please don't hesitate to reach out! :)
13th Jun 2018, 12:21 PM
Janningā­
Janningā­ - avatar
0
10 minutes was just an example, it won't be that long, don't worry So, how do I do it in JavaScript?
26th Sep 2018, 3:05 AM
Ammar Naif
Ammar Naif - avatar