How to import information from html to javascript

Question

I am new with JS and have problem with my script. I want to display on my web seniority date for employees. Here is my JS code to calculate it.

var dateObj1 = new Date( '1992/07/07 18:00:00' );
var dateObj2 = new Date();

//get difference in milliseconds
var diffMilliseconds = dateObj1.getTime() - dateObj2.getTime();

//make the difference positive
if( diffMilliseconds < 0 ) diffMilliseconds *= -1;

//convert milliseconds to hours
var diffYears = ( diffMilliseconds / 1000 ) / 60 / 60 / 24 / 365;

//print on console
var num = diffYears;
num = Math.floor(num);

if (num > 1)
{
document.write(num + ' years');
}
else if (num < 1)
{
document.write('less than one year');
}
else
{
document.write(num + ' year');
}

there will be around 45-50 eployees and instead of creating 50 js files want to define employment date var dateObj1 = new Date( '1992/07/07 18:00:00' ); in HTML but not realy know how to do that.

could someone post part of HTML code to be used and part of JS which have to be changed.

thank you.

Not entirely sure what your question is asking -- is `1992/07/07 18:00:00` a fixed date constant or is each employee have a different date? If it's just doing this 45-50 times, a for loop would suffice. What are you trying to do and what is the reasoning behind it? — aug, Jan 22 '13 at 21:00
[use `[data-*]` attributes to pass data associated with DOM elements; jquery makes this easy](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr). — zzzzBov, Jan 22 '13 at 21:37

score 0 · Answer 1 · answered Jan 22 '13 at 21:00

You could create a Map (object) that holds the employee's name, with their specified date. Then you take the logic you have that calculates how much time is left (and then displays it), and put that in a loop. For every employee in your map, calculate the number and then print.

score 0 · Answer 2 · answered Jan 22 '13 at 21:40

By placing your code in a function, and passing the data from the HTML through it, it should produce some good results.

HTML

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Startdate</td>
            <td>Date in years</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Employee #1</td>
            <td>1992/07/07 18:00:00</td>
        </tr>
        <!-- More employees -->
    </tbody>
</table>

JavaScript

var rows = document.querySelectorAll("tbody tr"); // Get all the rows

for(var i = 0; i < rows.length; i++) {
    // For each row, get the start date
    var startdate = rows[i].cells[1].innerText,
        years = calculateYears(startdate);

    // Create a DOM element with the result, and add it to the table
    var td = document.createElement("td"),
        result = document.createTextNode(years);
    td.appendChild(result);
    rows[i].appendChild(td);
}

// Years calculation
function calculateYears(startdate) {
    // Your function, slightly modified
}

Here's the result!

How to import information from html to javascript

2 Answers2