I'm making a timer with jQuery. When you press the "Reset" button, it is supposed to make the "Start" button visible again.
I am getting this error:
- Clicking the "Reset" button: The selector "#reset" does not render the expected css for property "display": expected 'inline-block' to deeply equal 'none'
Here is my html:
<!DOCTYPE html> <html lang="en"> <head> <title>Interactivity</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="styles/site.css"/> <script src="scripts/jquery-3.2.1.min.js"></script> <script src="scripts/formatTime.js"></script> <script src="scripts/times.js"></script> <script src="scripts/reset.js"></script> </head> <body> <div id="text"> <p> Can you internally count 45 seconds precisely? </p> </div> <button id="start">Start Timer</button> <button id="stop" style="display: none;">Stop Timer</button> <button id="reset" style="display: none;">Reset Timer</button> <span id="time_started" class="hidden" style="display: none;">Timer Started</span> <span id="time_ended" class="hidden">Timer Ended</span> </body> </html> Here is my css:
body { background-color: white; font-family: sans-serif; margin: 200px auto 0; max-width: 900px; } h1 { text-align: center; } div { margin-bottom: 50px; } .hidden { display: none; } Here is reset.js:
// reset everything $("#reset").on('click',function() { $(".results").addClass("hidden"); $("#reset").addClass("hidden"); $("#start").removeClass("hidden"); $("#time_started").addClass("hidden"); $("#time_ended").addClass("hidden"); }); Here is formatTime.js:
// formats the current date/time so that it reads as hh:mm:ss PM/AM function formatTime(time) { var end_time, formatted_time, formatted_end_time, start_time, hour = 12, minute = 10, second = 10, meridies; hour = time.getHours(); if (hour>12) { hour = hour-12; meridies = "PM"; } else { meridies = "AM"; } minute = time.getMinutes(); if (minute<10) { minute = "0"+minute; } second = time.getSeconds(); if (second<10) { second = "0"+second; } return hour+":"+minute+":"+second+" "+meridies; } Here is times.js:
/* global formatTime: true */ /* Please do not remove the comment above. */ // timer to calculate the starting and stopping clicks var start_time; var formatted_time; var end_time; var formatted_end_time; var time_change; $(document).ready(function() { $("#start").on('click',function() { $("#start").hide(); $("#stop").show(); $("#time_started").hide(); $("#time_ended").hide(); end_time = new Date(); start_time = new Date(); formatted_time = formatTime(start_time); }); $("#stop").on('click',function() { $("#stop").hide(); $("#reset").show(); $("#time_started").hide(); $("#time_ended").show(); end_time = new Date(); formatted_end_time = formatTime(end_time); $("body").append("<p class='results'>You started at "+formatted_time+".</p>"); $("body").append("<p class='results'>You finished at "+formatted_end_time+".</p>"); time_change = end_time-start_time; $("body").append("<p class='results'>You counted "+(time_change/1000)+" seconds.</p>"); $("body").append("<p class='results'>You are off by "+(time_change/1000-45)+" seconds.</p>"); }); }); 
没有评论:
发表评论