Can't get Javascript to set text

Question

I see examples for this all over, but for some reason, mine isn't working. I have a textbox that is added dynamically if a certain value is selected in a select list.

The part where the field shows up is working, but I am also trying to add some text to the box, which I can't get to work. I'm also trying to use JS to select the text once it's entered - but haven't gotten that far yet!

Is there something blatantly wrong with this?

function showBox() {
  if (document.getElementById("ctl00_Content_WhereFound").value == "Other" || document.getElementById("ctl00_Content_WhereFound").value == "Friend/Employee Referral") 
  {
    document.getElementById('ctl00_Content_WhereDetails').style.display = "inline";
    if (document.getElementById("ctl00_Content_WhereFound").value == "Other") {
      document.getElementById('ctl00_Content_WhereDetails').innerHTML += 'Enter Other';
    } else {
      document.getElementById('ctl00_Content_WhereDetails').innerText += "Enter Referral";
    }
  }
}

Answer 1

This looks like you're attempting to make a change to Asp.Net rendered controls. Make sure you have the actual id of the controls formatted correctly. Typically the UniqueID is formatted like ctl00_Content_WhereFound but the ClientID is formatted ctl00$Content$WhereFound.

Answer 2

First thing I noticed was that you used 'innerHTML' in your if clause and 'innerText' in your else clause. Was that on purpose? They do different things...

It's a pain, but it might be worth using the document.createElement() etc functions to build/modify the dynamic content.

I've had trouble with similar stuff... in general, using the DOM functions rather than innerHTML often fixes it, though it is significantly more verbose. JQuery has some very helpful functions for this.

Answer 3

innerText isn't supported by at least Firefox. Is there a reason you can't use innerHTML in both cases?

Also, you might want to store the element references to make your code cleaner and faster:

function showBox() {
  var eFound = document.getElementById("ctl00_Content_WhereFound");
  if (eFound.value == "Other" || eFound.value == "Friend/Employee Referral") 
  {
    var eDetails = document.getElementById('ctl00_Content_WhereDetails');
    eDetails.style.display = "inline";
    if (eFound.value == "Other") {
      eDetails.innerHTML += 'Enter Other';
    } else {
      eDetails.innerHTML += "Enter Referral";
    }
  }
}

Answer 4

try this..

function showBox()
{
    $Found = document.getElementById("ctl00_Content_WhereFound");
    $Where = document.getElementById('ctl00_Content_WhereDetails');

    if($Found.value == "Other" || $Found.value == "Friend/Employee Referral")
    {
        $Where.style.display = "inline";
        if($Where.value == "Other")
        {
            $Where.value = 'Enter Other';
        }else
        {
             $Where.value = "Enter Referral";
        }
    }
}

You can always assign elements to variables to shorten your code.