How can I change
background color using javascript?

Question

im trying to change the <div> color every time the expiration date is the same as the date today. Im thinking is that possible using if else statement?

Here is my code right now:

    <div class="col-md-6">
        <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-book" aria-hidden="true"></span>&nbsp;&nbsp;Passport <?php echo "<strong><a href=\"view_latest_passport.php?id=$id\"> $passport</a> /&nbsp; Passport Expiration Date:</strong> $passport_expiration"; ?></div>
    </div>

It's certainly possible in JavaScript, but I think a better solution would be to define a CSS class and in PHP if the date is today write that class to the div. — Dave, Jul 14 '16 at 02:38
Just an `if` without an `else` should be enough, assuming the default (non-expired) colour is set in your CSS. What have you tried so far? — nnnnnn, Jul 14 '16 at 02:44

StackSlave · Answer 1 · 2016-07-14T09:45:28.127

If you want here is a raw JavaScript example using AJAX, which I highly recommend:

//<![CDATA[
var pre = onload, E, cN, doc, bod, phpize, post, changeBackgroundColorOnExp;
onload = function(){
if(pre)pre();
doc = document; bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
cN = function(elem, className){
  if(doc.getElementsByClassName){
     return elem.getElementsByClassName(className);
  }
  else{
    var all = doc.getElementsByTagName('*'), r = [];
    for(var i=0,l=all.length; i<l; i++){
      var ai = all[i];
      if(ai.className === className){
        r.push(ai);
      }
    }
    return r;
  }
}
phpize = function(obj, ignore){
  var r = [];
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
      var p = ignore ? ignore+'['+i+']' : i;
      var v = obj[i];
      var s = typeof v === 'object' ? phpize(v, p) : encodeURIComponent(p)+'='+encodeURIComponent(v);
      r.push(s);
    }
  }
  return r.join('&');
}
post = function(where, send, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, eval('('+x.responseText+')'));
    }
  }
  x.send(phpize(send));
}
changeBackgroundColorOnExp = function(elem, color, exp){
  if(exp){
    elem.style.backgroundColor = color;
  }
}
post('pageYouGetDataFrom.php', {dateTest:1}, function(res){
  changeBackgroundColorOnExp(cN('col-md-6')[0], '#700', res.exp);
}
}
//]]>

Now for pageYouGetDataFrom.php

<?php
date_default_timezone_set('America/Vancouver'); // change to your timezone
if(isset($_POST['dateTest']) && $_POST['dateTest'] === '1'){
  $req = array(); $td = new DateTime; $xd = new DateTime($resultFromQuery);
  if($td->getTimestamp() > $xd->getTimeStamp()){
    $req['exp'] = true;
  }
  else{
    $req['exp'] = false;
  }
  echo json_encode($req);
}
?>

Of course, since this it looks like you're only doing this on page load then you could alter the bottom part of the code and just use that on your initial page, but I think you'll appreciate this AJAX example in the future. You don't want to use Client time anyways, since it can be altered by the Browser User.

How can I change background color using javascript?

1 Answers1

How can I change
background color using javascript?