Refreshing after innerText changed?

Eddie Shipman
Eddie Shipman used Ask the Experts™
on
Got the following javascript in one of my pages to update the label for a textarea when a user selects a particular
option from a select. how do I make the label change and it be reflected in the page?

function output()
{
    var usage;
  qs_enginename = document.getElementById('qsearch_select').value;
    if (qs_enginename == 'siteauthor')
  {
      usage = "Usage: keyword(s) author:username";  
  } else {
      usage = "Usage: keyword(s)";  
  };
  document.getElementById("usage").innerText = usage;
  // The alert box correctly  shows the innerText I want but
  // the Label DOES NOT CHANGE
  alert(document.getElementById("usage").innerText);
}


HTML:

  <form id="qsearch_form" method="post" action="search.php" onsubmit="return qsearch_onSubmit();">
  <p>
    <input type="text" tabindex="6" name="keywords" id="searchfield" size="22" maxlength="40" title="searchkw" value="" />
  </p>
  <p>
  <select id="qsearch_select" tabindex="7" onChange="output()">
    <optgroup label="SITE">
      <option value="site">Posts</option>
      <option value="siteauthor">Posts by Author</option>
      <option value="author">Author</option>
    </optgroup>
    <optgroup label="ENGINE">
      <option value="wikipedia">Wikipedia</option>
      <option value="google">Google</option>
      <option value="yahoo">Yahoo</option>
      <option value="msnlive">MSNlive</option>
      <option value="altavista">Altavista</option>
      <option value="lycos">Lycos</option>
      <option value="odp">Open directory</option>
    </optgroup>
  </select>
  <input type="hidden" name="search_fields" value="all" />
  <input type="hidden" name="show_results" value="topics" />
  <input type="submit" value="sh" class="button2" tabindex="8" />
  </p>
  <label for="searchfield" id="usage">Usage: keyword(s)</label>
  <br />
  </form>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
It should not requre any refreshing.

It may not working because this line may not be supported in your browser:
qs_enginename = document.getElementById('qsearch_select').value

var selectBox = document.getElementById('qsearch_select');
qs_enginename = selectBox.options[selectBox.selectedIndex].value


You may also try innerHTML instead of innerText
Eddie ShipmanAll-around developer

Author

Commented:
No I didn't try and I'm using FF3 so it should have worked.
How would I rewrite it so it'd work for all browsers?

Commented:
I gave the example of how it should work in all the broswers:

var selectBox = document.getElementById('qsearch_select');
qs_enginename = selectBox.options[selectBox.selectedIndex].value

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Eddie ShipmanAll-around developer

Author

Commented:
This code still doesn't refresh in FF3
function output()
{
    var usage;
    var selectBox = document.getElementById('qsearch_select');
	var label     = document.getElementById('usage');
    qs_enginename = selectBox.options[selectBox.selectedIndex].value
  	if (qs_enginename == 'siteauthor') 
	{
    	usage = "Usage keyword(s) ^username";	
	} else {
    	usage = "Usage keyword(s)";	
	};
	label.innerText = usage;
}

Open in new window

Eddie ShipmanAll-around developer

Author

Commented:
alert(usage);

Shows the correct text.
Commented:
.innerHTML works.
.innerText does not work in firefox according to this:

http://blog.coderlab.us/2005/09/22/using-the-innertext-property-with-firefox/

.textContent works in Firefox.

According to this, something similar is needed for safari
http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/

FYI .innerHTML works for all of them, but of course it can have an effect different than you want if html markup is in the text.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial