How to get 'text' out of <p>Text<input type="... </p>

Question

Hello,

I can't get this to work in IE:

This is what the HTML code looks like: <p class="red">Red: <input type="text" id="red_input" value="0"></p>

id is in this case: document.getElementById('red_input');

I want to return ONLY the word 'red'. It works great in FF, but not in IE.

function error(id){

   var prnt = id.parentNode,
       parentColor = prnt.childNodes[0].textContent,
       trimmed = parentColor.replace(/\s+/g,'').replace((/\:$/),"").toLowerCase();

       return trimmed
}

In FF it returns the string 'red' In IE it returns 'undefined is null or not an object'. I figured that it's the 'textContent' that does not seem to work in IE. Anyone got any suggestions?

Any help much appreciated!

Answer 1

In IE you should get the innerText property:

function error(id){
  var prnt = id.parentNode.childNodes[0],
      parentColor = prnt.textContent || prnt.innerText,
      trimmed = parentColor.replace(/\s+/g,'').replace((/\:$/),"").toLowerCase();

  return trimmed;
}

Notice that I used the logical or operator (||), so if textContent is undefined (or falsy), it will look for the innerText.

Answer 2

For a cross-browser solution, try this:

parentColor = prnt.innerHTML.substring(0, prnt.innerHTML.indexOf(':'));