Help understanding Scripting in HTML Viewer Widget?

Version 4 V4 Question
15

Just to give people a head-start to doing things with Javascript…

When it comes to Javascript in a Webpage, we basically have 3 layers:

  • Window (the HTML portion of the page)
  • Document (DOM - Document Object Model)
  • Javascript

It’s important to know which layer (or Object) you are trying to affect, because different types of Objects have different Methods and Properties. Take the following code for example:

window.location.href = 'http://localhost/?screen=PURCHASE';

document.body.style.backgroundColor='#FF0000';

document.getElementById('sinventoryitemtypefilter').value='Coffee';
document.requests_FORM.igroupcodefilter.value='Coffee';

document.getElementById("requests_FORM").submit();
document.requests_FORM.submit();

var acollection = document.getElementsByTagName('a');
acollection[4].click();
var divcollection = document.getElementsByTagName('div');
divcollection[7].click();

This causes the window to navigate to the given href, in this case, a full URL is provided:

window.location.href = 'http://localhost/?screen=PURCHASE';

This causes the Document Tag Element called body to set the value ‘#FF0000’ (red) into it’s backgroundColor style Property, effectively setting the page background color to Red:

document.body.style.backgroundColor='#FF0000';

This causes the Document Element whose ID is defined as sinventoryitemtypefilter to set the value ‘Coffee’ into it’s value Property. This is a simple way to set a Form Input value programmatically:

document.getElementById('sinventoryitemtypefilter').value='Coffee';

This causes the Document Element whose FORM Name is defined as requests_FORM to set the Form Input element whose name is igroupcodefilter to have ‘Coffee’ in it’s value Property. This is another simple way to set a Form Input value programmatically:

document.requests_FORM.igroupcodefilter.value='Coffee';

This causes the Document Element whose FORM ID is defined as requests_FORM to invoke the submit() method, effectively sending the form data to the server to be processed.

document.getElementById("requests_FORM").submit();

This does the same thing as above, but in this case we are referencing the FORM Name defined as requests_FORM to invoke the submit() method.

document.requests_FORM.submit();

This code searches the Document for all HTML Tag Elements of type ‘a’ and stores them into an array object called acollection. It then invokes the click() method on the 5th member of the acollection array. HTML Tags which go by the Name of a are Hyperlink tags, so this is like clicking on a hyperlink.

var acollection = document.getElementsByTagName('a');
acollection[4].click();

This code searches the Document for all HTML Tag Elements of type ‘div’ and stores them into an array object called divcollection. It then invokes the click() method on the 6th member of the divcollection object. HTML Tags which go by the Name of div can be thought of as formatting blocks or boxes in the page, so this is like clicking on one of those blocks. This may or may not have any effect on the div in question, but if the div element has an onClick() handler, something will happen.

var divcollection = document.getElementsByTagName('div');
divcollection[7].click();
1 Like