making javascript print different things

Question

I've got a table, which function is to make the cell red or green, depending on the date of the cell.

Now when i set the datetest to 24-09-2017, all the cells go red, as expected in the code. When i change it to 26-07-2017, it changes to green, which is again, as expected. Now I want to make it so, that only 1 cell has a date in the past, and the rest in the future. How can i make my code so, that it does just that?

Here is my code:

var datetest = '22-9-2017';
alert("Welcome")
var d = new Date();

var month = d.getMonth() + 1;
var day = d.getDate();

var output = (day < 10 ? '0' : '') + day + '-' +
  (day < 10 ? '0' : '') + month + '-' +
  d.getFullYear();

$(document).ready(function() {
  if (datetest < output) {
    $('.test1').css("background-color", "red");
    $('.test2').css("background-color", "red");
    $('.test3').css("background-color", "red");
    $('.test4').css("background-color", "red");
    $('.test5').css("background-color", "red");
  } else {
    $('.test1').css("background-color", "green");
    $('.test2').css("background-color", "green");
    $('.test3').css("background-color", "green");
    $('.test4').css("background-color", "green");
    $('.test5').css("background-color", "green");

  }
  $('.test1').text(output);
  $('.test2').text(output);
  $('.test3').text(output);
  $('.test4').text(output);
  $('.test5').text(output);

});

td {
  padding: 20px;
}

<!DOCTYPE HTML>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<table>
  <tr>
    <th>werkvoorbereiding</th>
    <th>Ordervrijgave productie</th>
    <th>Buigen</th>
    <th>Zagen</th>
    <th>Metaal</th>
  </tr>
  <tr>
    <td class="test1">1</td>
    <td class="test2">2</td>
    <td class="test3">3</td>
    <td class="test4">4</td>
    <td class="test5">5</td>


  </tr>
</table>

</html>

can you be more precise ? you do this by having 2 **output**, no ? — Temani Afif, Sep 25 '17 at 09:08
I want to use seperate dates for seperate cells, now every cell has the same date, so they all change when i change the datetest. — gnunix, Sep 25 '17 at 09:10
Don't compare dates with string values, this would result in `"26-8-2016"` to be greater than `"22-9-2017"`, see [this question](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) on how to compare dates — Kevin Kloet, Sep 25 '17 at 09:16

Temani Afif · Accepted Answer · 2017-09-25T09:17:50.373

maybe you want something like this :

var datetest1 = '20-9-2017';
var datetest2 = '29-9-2017';
alert("Welcome")
var d = new Date();

var month = d.getMonth() + 1;
var day = d.getDate();

var output = (day < 10 ? '0' : '') + day + '-' +
  (day < 10 ? '0' : '') + month + '-' +
  d.getFullYear();

$(document).ready(function() {
  if (datetest1 < output) {
    $('.test1').css("background-color", "red");
    $('.test2').css("background-color", "red");
    $('.test3').css("background-color", "red");
  } else {
    $('.test1').css("background-color", "green");
    $('.test2').css("background-color", "green");
    $('.test3').css("background-color", "green");

  }
  if (datetest2 < output) {
    $('.test4').css("background-color", "red");
    $('.test5').css("background-color", "red");
  } else {
    $('.test4').css("background-color", "green");
    $('.test5').css("background-color", "green");

  }
  $('.test1').text(output);
  $('.test2').text(output);
  $('.test3').text(output);
  $('.test4').text(datetest1);
  $('.test5').text(datetest2);

});

td {
  padding: 20px;
}

<!DOCTYPE HTML>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<table>
  <tr>
    <th>werkvoorbereiding</th>
    <th>Ordervrijgave productie</th>
    <th>Buigen</th>
    <th>Zagen</th>
    <th>Metaal</th>
  </tr>
  <tr>
    <td class="test1">1</td>
    <td class="test2">2</td>
    <td class="test3">3</td>
    <td class="test4">4</td>
    <td class="test5">5</td>


  </tr>
</table>

</html>

making javascript print different things

1 Answers1