How to change the value of this input code with javascript?

Question

This is the javascript -

  <script src='//www.google.com/jsapi' type='text/javascript'></script>
  <script type='text/javascript'>
  google.load('search', '1', {language: 'en', style: google.loader.themes.BUBBLEGUM});
  google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  var customSearchControl =   new google.search.CustomSearchControl('001216773833632189276:ki_enp2eefa', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
  }, true);
  </script>

And its returning input code is with table column-

<td class="gsc-search-button"> <input type="button" value="Search" class="gsc-search-button" title="search"> </td>

Here i want to set the value GO. How can i get it ?

Answer 1

if you only have 1 element in your page follow this:

var searchField = document.getElementsByClassName("gsc-search-button")[0];
searchField.value = "GO";

Example : http://jsfiddle.net/uN2NV/

for multiple elements Try this:

var searchField = document.getElementsByClassName("gsc-search-button");
for(var i =0; i<searchField.length;i++)
{
    searchField[i].value = "GO";
}

Example: http://jsfiddle.net/uN2NV/1/

For distinct element among multiple elements that share the same class:

var searchField = document.getElementById("distinct");
searchField.value = "GO";

Example: http://jsfiddle.net/uN2NV/2/