Member Avatar for Thomas_31 
<!doctype html>
<!-- Name:Thomas Smith
     Email:tsmith27@my.athens.edu
     Student No.00048668 -->
<!-- ============================================================== -->
<html>
 <head>
 <meta charset="utf-8">
   <title>Time Remaining</title>
   <body>
   <h1 style="text-align:left">How Much Time Until?</h1>
   <br>
   <p>Enter the date: <input type="text" id="endBox" size=16 value=''></p>
   <br>
   <br>
   <hr>
   <input type="button" value="Find Out" style="width:130px;" onclick="javascript:TimeUntil();"/>
   <div id="outputDiv"></div>
      <script type="text/javascript" src="time.js"></script>
      <script type="text/javascript">
function TimeUntil()
{document.getElementById('endBox').value);
  var seconds = SecondsUntil('endBox');
  var time = SecondsToString(answer);

  return time;
}
function SecondsToString(seconds)
{
  var days = Math.floor(seconds / (24*60*60));
  seconds = seconds - days*(24*60*60);
  var hours = Math.floor(seconds / (60*60));
  seconds = seconds - hours*(60*60);
  var minutes = Math.floor(seconds / 60);
  seconds = seconds - minutes*60;

  var answer = days + ' days, ' + hours + ' hours, ' + minutes + ' minutes, ' +
         seconds + ' seconds';
}
function SecondsUntil(endBox)
{
  var goalDate = new Date(endBox);
  var current = new Date();
  var diff = Math.floor((goalDate - current)/1000);
 document.getElementById('outputDiv')innerHTML = "Time left is " + diff;   
  }
</script>
</body>
</html>
Edited by Thomas_31 because: Can anyone help, I have to turn this in Monday. I've been given a solution by a friend on another site but it's more complicated than what is here and I know my Professor would know it wasn't my work. I just need to know what to do with this code to make
  • 3 Contributors
  • 2 Replies
  • 225 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by 2teez

Dani AI

Generated

had a few distinct problems that stop the script from producing visible output. already flagged the missing assignment when grabbing the textbox value and the typo that drops the dot before innerHTML; correctly suggested using a native date control to avoid parsing headaches. Additional blockers found in the original markup: the <body> tag was placed inside <head>, some helper functions never return a value, and relying on the Date constructor with arbitrary strings (like "Jan 1, 2020") can be inconsistent across environments.

A concise, robust approach: normalize/parse the input into a Date built from numeric components, compute seconds difference, format the duration string, and write that string to the output element. The example below shows those steps and avoids relying on fragile string parsing from Date:

function showCountdown() {
  var input = document.querySelector('#endBox').value.trim();
  var target = parseFlexibleDate(input);
  if (!target || isNaN(target.getTime())) {
    document.getElementById('outputDiv').textContent = 'Invalid date format';
    return;
  }
  var secs = Math.max(0, Math.floor((target - new Date()) / 1000));
  document.getElementById('outputDiv').textContent = formatDuration(secs);
}

function parseFlexibleDate(s) {
  var iso = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
  if (iso) return new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));
  var m = s.match(/^([A-Za-z]{3,})\s+(\d{1,2}),\s*(\d{4})$/);
  if (m) {
    var months = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
    var idx = months.indexOf(m[1].slice(0,3).toLowerCase());
    return idx >= 0 ? new Date(Number(m[3]), idx, Number(m[2])) : null;
  }
  return null;
}

function formatDuration(sec) {
  var d = Math.floor(sec / 86400); sec %= 86400;
  var h = Math.floor(sec / 3600); sec %= 3600;
  var m = Math.floor(sec / 60); var s = sec % 60;
  return d + ' days, ' + h + ' hours, ' + m + ' minutes, ' + s + ' seconds';
}

Notes and quick checklist: prefer a native date input when possible (gives a predictable YYYY-MM-DD value); construct dates with new Date(year, monthIndex, day) to avoid timezone shifting that sometimes occurs with date-only strings; remove stray parentheses and typos (console will show syntax errors), place <script> tags just before </body>, and attach the click handler via addEventListener instead of embedding javascript: in the onclick attribute.

Recommended Answers

All 2 Replies

Member Avatar for almostbob 
<p>Enter the date: <input type="date" id="endBox" size='16'></p>
Member Avatar for 2teez

Hi Thomas_31,

There are numbers of errors in your script. Bu the obvious one in which you presently batteling with occurs on line 22 of the OP.
You are taking the vaule of text in the textbox you provided, but you are not assigning it to any variable, hence it taken it into void like. So you probably want to assign that to a variable like so: var myValue = document.getElementById('endBox').value; and then pass that variable to your function SecondsUntil like so var seconds = SecondsUntil(myValue); and not what you are presently doiing.

Secondly, you will not also get display like you wanted because instead of doing this document.getElementById('outputDiv').innerHTML = "Time left is " + diff; you are doing this document.getElementById('outputDiv')innerHTML = "Time left is " + diff; Check line 45. It is .innerHTML, you missed the ..

Lastly, what is the scope of your variable answer used in line 24?

Please check these and some other design issues.

Hope this helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.