Change CSS using Javascript on page load Event

Question

I have a input text field where the app user can enter the document description. On a page load event I check if this input field is empty. If it is empty, I insert the following text and change the style to italic and red-

Please enter a description for this document

I have event listeners for onblur and onfocus events while the page is active.

Basically if the user clicks into the text field, I change the CSS back to normal and black and revert the value to an empty string.

Onblur I'll check the contents - if it's empty I'll revert back to the "Please enter..." message and the red/italic CSS. If it's not empty I'll keep the user input as is.

The problem I'm having is that after the initial page load, if the user goes away to another page to do a lookup and then comes back and THEY DID NOT CHANGE the document description, so it is still saying "Please enter...", the red and italic CSS does NOT take affect.

I am experiencing this in Firefox across all browsers.

Here is how I am register the page onload events across the browsers -

//Microsoft Internet Explorer Browser - iFrame event register
if (navigator.appName.indexOf("Microsoft") != -1) {
  var frame = getPortlet();

  frame.contentWindow.location.replace('${channelUrl}');
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  var refresh = function() {
    prevPortletLoadEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };

  if(frame.attachEvent) { frame.attachEvent('onload', refresh); } //IE browsers before version 9
  else  { frame.addEventListener('load', refresh, false); }
}

//All other major browsers - iFrame event register
else {
  var frame = getPortlet();
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  frame.onload = function () {
    prevPortletLoadEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };

  var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
  var onresize = function () {
    prevPortletResizeEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };
}

And here is the enforeDocumentDescriptionStyleIfNecessary -

function enforceDocumentDescriptionStyleIfNecessary() {

  var  efrm  = getPortlet();
  var  e_doc = efrm.contentDocument ? efrm.contentDocument: efrm.contentWindow.document;
  var  e_docElement = e_doc.getElementById('document.documentHeader.documentDescription');
  if (e_docElement.value == 'Please enter a description for this document') {


    e_docElement.style = 'italic';
alert("1");    
    e_docElement.color = 'red';
alert("2");
  }
}

The code gets executed on the page load. The alert boxes show up displaying 1 and 2 and I can visually inspect the html for this element after each alert box).

The style is not being added! It is as if this code is executed but ignored...

What am I doing wrong?

Answer 1

You aren't correctly setting the style of the element. It should be:

e_docElement.style.fontStyle = 'italic';
e_docElement.style.color = 'red';

You will always need to use the style property to modify the inline css of an element.