October 28, 2000 - Changing a Button Faceplate | WebReference

October 28, 2000 - Changing a Button Faceplate

Yehuda Shiran October 28, 2000
Changing a Button Faceplate
Tips: October 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The textRange object is very helpful when you need to edit parts of the page. For example, the following script changes the faceplate of the first input field to "Clicked". It first collects all input fields to inputColl:

var inputColl = document.all.tags("INPUT");
and then creates a textRange object:

var range = inputColl[0].createTextRange();
Finally, it assigns a different text to the range:

range.text = "Clicked";
Here is the function convert() that we added to this tip:

function convert() {
  var inputColl = document.all.tags("INPUT");
  if (inputColl!=null && inputColl.length>0) {
    var range = inputColl[0].createTextRange();
    range.text = "Clicked";
  }
}

Here is the button that, when clicked, will change its faceplate to "Clicked":

Here is the button's HTML code: 

<FORM>
  <INPUT TYPE="button" onclick="javascript:convert()" VALUE="Click Here">
</FORM>