Why is my output not displaying in my div?

Question

I am testing out some time formatting systems (like Twitter has a time since posting next to a tweet) and so I set up a barebones HTML page to run my javascript on, however the output is not being displayed in my div. Why is this happening? Any help is appreciated!

Page:

<html>
<head>
  <title>Testing</title>
</head>
<body>
  <div id="app">
    <script>
      var app = require('ago');
      #('app').innerHTML = timeSince(old_date);
    </script>
  </div>
</body>
</html>

Script:

var old_date = new Date("November 13, 2017 5:00 PM");

function #(sel) {
  return document.getElementById(sel);
}

function timeSince(post_minute) {

  var seconds = Math.floor((new Date() - post_minute) / 1000);
  var interval = Math.floor(seconds / 31536000);

  if (interval > 1) {
        return interval + "y";
    }
    interval = Math.floor(seconds / 2592000);
    if (interval > 1) {
        return interval + "mo.";
    }
    interval = Math.floor(seconds / 86400);
    if (interval > 1) {
        return interval + "d";
    }
    interval = Math.floor(seconds / 3600);
    if (interval > 1) {
        return interval + "h";
    }
    interval = Math.floor(seconds / 60);
    if (interval > 1) {
        return interval + "m";
    }
    return Math.floor(seconds) + " seconds";
}

I'm not using jQuery for my selector. I wrote my own in my JS file — Alexis Knox, Feb 20 '17 at 03:28
@JayantiLal but that would be jQuery.... I think the problem is `#()` isn't a valid function name See here https://jsfiddle.net/97b6yajk/ compared to this https://jsfiddle.net/kjzw0ay7/ — NewToJS, Feb 20 '17 at 03:28
@AlexisKnox Open your browser console, errors will display in there but I have just tried with `$` and `_` both work fine for me https://jsfiddle.net/8s441z65/ and https://jsfiddle.net/6bu6kpkp/ — NewToJS, Feb 20 '17 at 03:33

score 0 · Answer 1 · answered Feb 20 '17 at 03:34

# is not a valid identifier in JavaScript. I changed it to $ and your code ran just fine.

var old_date = new Date("November 13, 2017 5:00 PM");

function $(sel) {
  return document.getElementById(sel);
}

function timeSince(post_minute) {

  var seconds = Math.floor((new Date() - post_minute) / 1000);
  var interval = Math.floor(seconds / 31536000);

  if (interval > 1) {
        return interval + "y";
    }
    interval = Math.floor(seconds / 2592000);
    if (interval > 1) {
        return interval + "mo.";
    }
    interval = Math.floor(seconds / 86400);
    if (interval > 1) {
        return interval + "d";
    }
    interval = Math.floor(seconds / 3600);
    if (interval > 1) {
        return interval + "h";
    }
    interval = Math.floor(seconds / 60);
    if (interval > 1) {
        return interval + "m";
    }
    return Math.floor(seconds) + " seconds";
}

$('app').innerHTML = timeSince(old_date);

<html>
<head>
  <title>Testing</title>

</head>
<body>
  <div id="app">
  </div>
</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:00

# is not a valid identifier in javascript. Read this answer to know what are the valid identifiers.

Example Snippet:

var old_date = new Date("November 13, 2017 5:00 PM");
$('app').innerHTML = timeSince(old_date);

function $(sel) {
  return document.getElementById(sel);
}

function timeSince(post_minute) {

  var seconds = Math.floor((new Date() - post_minute) / 1000);
  var interval = Math.floor(seconds / 31536000);

  if (interval > 1) {
    return interval + "y";
  }
  interval = Math.floor(seconds / 2592000);
  if (interval > 1) {
    return interval + "mo.";
  }
  interval = Math.floor(seconds / 86400);
  if (interval > 1) {
    return interval + "d";
  }
  interval = Math.floor(seconds / 3600);
  if (interval > 1) {
    return interval + "h";
  }
  interval = Math.floor(seconds / 60);
  if (interval > 1) {
    return interval + "m";
  }
  return Math.floor(seconds) + " seconds";
}

<div id="app">
</div>

Why is my output not displaying in my div?

2 Answers2