asked on

Refreshing after innerText changed?

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>

kevin_u

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 Shipman

ASKER

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?

kevin_u

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

Eddie Shipman

ASKER

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 Shipman

ASKER

alert(usage);

Shows the correct text.

ASKER CERTIFIED SOLUTION

kevin_u

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial