How to apply javascript to more than one element in html document?

Question

I just started learning HTML and Javascript, so this might turn out to be a dumb question, but I couldn't find the answer anywhere where google sent me.

What I want to do:

I want to have something in my HTML document that takes an argument (a date), runs my javascript on it and then changes the colour and the text according to the argument.

What I have tried so far:

Working (but extremely stupid) solution:

  <p id="demo"> </p> 
  <script>
   d = new Date();
   i = new Date(2014,0,19); //This is my "argument"
   var timesince = Math.floor((d.getTime() - i.getTime())/1000/60);
   var unit = "min";
   var colour = '#AAA';
   if (timesince > 60){
     timesince = Math.floor(timesince/60);
     unit = "h";
     if (timesince > 7) colour = '#a46744';
   }
   document.getElementById("demo").innerHTML = timesince.toString()+unit;
   document.getElementById("demo").style.color = colour;
  </script> 

But obviously, with this I would have to make one script for each element where I want to use this, and think of a new id every time, and change the hard-coded argument in the copy-pasted scripts individually. Which is crazy.

So, I thought about converting this into a function, and calling it for each element, but I don't know how. Or if that is even possible. All examples I found where for clicking like this:

 <a href=javascript:function()>Click</a>

Which is not at all what I want.

What I am looking for is a way to have something like this:

 <selfdefinedtag arguments=(2014,0,23)></selfdefinedtag>

which is then processed by the script above, only that i from the script is not hard-coded, but initialised by the values in arguments. And the colour and text is supposed to be different for each element.

So my questions are:

How can I convert i into an actual argument? (I am especially unsure about this Date() construct.)

How can I apply my script to more than one element with different arguments?

If you have general criticisms of my code about best practices and the like, I would be happy to hear them. I am not emotionally attached to what I have produced so far, so rip it apart all you like.

Answer 1

Just make a function out of your code...

function changeElem(y1,m1,d1,elem){
 d = new Date();
   i = new Date(y1,m1,d1,0,0,0); //This is my "argument"
   var timesince = Math.floor((d.getTime() - i.getTime())/1000/60);
   var unit = "min";
   var colour = '#AAA';
   if (timesince > 60){
     timesince = Math.floor(timesince/60);
     unit = "h";
     if (timesince > 7) colour = '#a46744';
   }
   elem.innerHTML = timesince.toString()+unit;
   elem.style.color = colour;
}

To apply it to all a elements just do...

var elem = document.getElementsByTagName("a");

[].forEach.call(elem, function(e){
   var y = +e.getAttribute("data-y");
   var m = +e.getAttribute("data-m");
   var d = +e.getAttribute("data-d");
   changeElem(y,m,d,e);
});

(I used + unary operator to convert the string to numberical value, getAttribute will fetch the data attributes.)

And the a tag should be like

<a href="..." data-y="2014" data-m="0" data-d="19">...</a>