at (index)
Gets the element at the specified index within the WebUI object. A negative index will count back from the end of the array.
Returns - HTMLElement.
Argument
Type
Description
index
integer
A positive or negative integer.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elements = webui("#button1, #button2, #button3, #button4");
let element = elements.at(2);
});
JS
concat (array1, array2, ...)
Merges one or more array like objects into a new array.
Returns - Array.
Argument
Type
Description
array1, array2, ...
Object list
One or more array like objects.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const obj1 = webui("#button1, #button2");
const obj2 = webui("#button3, #button4");
let elems = obj1.elements().concat(obj2.elements());
});
JS
every (callback)
Tests whether each element in an array meets the conditions specified by the provided callback function.
Returns - Boolean.
Argument
Type
Description
callback
Function
A callback function.
Callback function arguments
Argument
Type
Description
element
Object or primative.
The current array element.
index
Integer
A interger value.
array
Array
The array being operated on.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const isButton = (currentValue) => ui(currentValue).is("button");
const result = elems.every(isButton);
});
JS
filter (callback)
Creates a new array containing the elements of an original array that meet the conditions specified by the provided callback function.
Returns - Boolean.
Argument
Type
Description
callback
Function
A callback function.
Callback function arguments
Argument
Type
Description
element
Object or primative.
The current array element.
index
Integer
A interger value.
array
Array
The array being operated on.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-success" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-success" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
let filteredArray = elems.filter((button) => ui(button).hasClass("button-success"));
});
JS
forEach (callback)
Calls the callback function for each element in an array.
Returns - undefined.
Argument
Type
Description
callback
Function
A callback function.
Callback function arguments
Argument
Type
Description
element
Object or primative.
The current array element.
index
Integer
A interger value.
array
Array
The array being operated on.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
elems.forEach((element) => {
console.log(element);
});
});
JS
includes (value)
Searches an array for the presence of the specified value.
Returns - Boolean.
Argument
Type
Description
value
Object or primative
A value to search for.
index
Integer
An integer index to start searching from.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const elem = webui("#button3");
const result = elems.includes(elem[0]);
});
JS
indexOf (value)
Returns the index of the specified value within an array.
Returns - Integer.
Argument
Type
Description
value
Object or primative
A value to search for.
index
Integer
An integer index to start searching from.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const elem = webui("#button3");
const result = elems.indexOf(elem[0]);
});
JS
join (separator)
Returns a concatenated string separated by commas, or separated by a specified separator.
Returns - String.
Argument
Type
Description
separator
String
A string that should be used to separate each item of the concatenated string.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const mapped = elems.map((x) => ui(x).text());
const str = mapped.join();
});
JS
map (function)
Returns a new array containg all elements of the original array, but transformed by specified function.
Returns - Array.
Argument
Type
Description
callback
Function
A callback function.
Callback function arguments
Argument
Type
Description
element
Object or primative.
The current array element.
index
Integer
A interger value.
array
Array
The array being operated on.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const arr = elems.map((x) => ui(x).text());
});
JS
pop ()
Removes the last element from an array and returns it.
Returns - Object.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const elem = elems.pop();
});
JS
push (object, object, ...)
Adds new elements to the end of an array and returns the new length.
Returns - Integer.
Argument
Type
Description
object, object, ...
Object list
One or more objects to be added to an array.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3");
const newElem = ui("#button4");
const length = elems.push(newElem);
});
JS
reduce (callback)
Reduces the values of elements in an array to a single value by executing a callback function used to accumulate a running result.
Returns - Object or primative.
Argument
Type
Description
callback
Function
A function serving as a reducer.
<input type="text" value="22.5" id="txt1" /> <input type="text" value="17.1" id="txt2" /> <input type="text" value="6.9" id="txt3" /> <input type="text" value="12.7" id="txt4" />
HTML
webui.ready( () => {
const elems = webui("#txt1, #txt2, #txt3, #txt4");
const initialValue = 0;
const total = elems.reduce(
(accumulator, current) => accumulator + parseFloat(current.value),
initialValue,
);
});
JS
reduceRight (callback)
Reduces the values of elements in an array to a single value by executing a callback function used to accumulate a running result. ReduceRight works from the end of an array to the beginning.
Returns - Object or primative.
Argument
Type
Description
callback
Function
A function serving as a reducer.
<input type="text" value="22.5" id="txt1" /> <input type="text" value="17.1" id="txt2" /> <input type="text" value="6.9" id="txt3" /> <input type="text" value="12.7" id="txt4" />
HTML
webui.ready( () => {
const elems = webui("#txt1, #txt2, #txt3, #txt4");
const initialValue = 0;
const total = elems.reduceRight(
(accumulator, current) => accumulator + parseFloat(current.value),
initialValue,
);
});
JS
reverse ()
Reverses the order of all elements in an array and returns the it.
Returns - Array.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
let elems = webui("#button1, #button2, #button3, #button4");
const arr = elems.reverse();
});
JS
shift ()
Removes the first element in an array and returns the it.
Returns - Object or primative.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
let elems = webui("#button1, #button2, #button3, #button4");
const firstItem = elems.shift();
});
JS
slice (start, end)
Returns a copy of all or part of an array, depending on the start and end index. If no end index is specified then an array from start to the end of the array is returned. If no start index is specified a copy of the original array is returned.
Returns - Array.
Argument
Type
Description
start
Integer
The starting index.
end
Integer
The ending index.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
const elems = webui("#button1, #button2, #button3, #button4");
const arr = elems.slice(2);
});
JS
some (callback)
Returns true or false, depending on whether at least one element of an array meets the condition specified by the callback function.
Returns - Boolean.
Argument
Type
Description
callback
Function
A callback function.
Callback function arguments
Argument
Type
Description
element
Object or primative.
The current array element.
index
Integer
A interger value.
array
Array
The array being operated on.
<input type="text" value="22.5" id="txt1" /> <input type="text" value="17.1" id="txt2" /> <input type="text" value="6.9" id="txt3" /> <input type="text" value="12.7" id="txt4" />
HTML
webui.ready( () => {
const elems = webui("#txt1, #txt2, #txt3, #txt4");
const result = elems.some((x) => parseFloat(x.value) > 30);
});
JS
sort (compare)
Sorts an array according to the specified compare function, or sorts in acsending order using a string comparison if no compare function is provided.
Returns - Array.
Argument
Type
Description
compare
Function
A callback function.
Callback function arguments
Argument
Type
Description
a
Object or primative.
An array element.
b
Object or primative.
An array element.
<input type="text" value="22.5" id="txt1" /> <input type="text" value="17.1" id="txt2" /> <input type="text" value="6.9" id="txt3" /> <input type="text" value="12.7" id="txt4" />
HTML
webui.ready( () => {
const elems = webui("#txt1, #txt2, #txt3, #txt4");
function compareNumbers(a, b) {
return a.value - b.value;
}
const arr = elems.sort(compareNumbers);
});
JS
splice (start, deleteCount, item, item, ...)
Inserts elements into an array at the start index and optionally deletes elements of an array from the start index, then returns an array containing the deleted elements.
Returns - Array.
Argument
Type
Description
start
Integer
The index to start inserting new elements.
deleteCount
Integer
The number of elements to remove from the start index.
item, item, ...
Object or primative
One or more items to insert.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
let elems = webui("#button1, #button4");
const arr = elems.splice(1, 0, ui("#button2").element(), ui("#button3").element());
});
JS
toReversed ()
Creates a new array with all elements in reverse order. The original array is not changed.
Returns - Array.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
let elems = webui("#button1, #button2, #button3, #button4");
const arr = elems.toReversed();
});
JS
toSorted (compare)
Creates a new array and sorts it according to the specified compare function, or sorts in acsending order using a string comparison if no compare function is provided. The original array is not changed.
Returns - Array.
Argument
Type
Description
compare
Function
A callback function.
Callback function arguments
Argument
Type
Description
a
Object or primative.
An array element.
b
Object or primative.
An array element.
<input type="text" value="22.5" id="txt1" /> <input type="text" value="17.1" id="txt2" /> <input type="text" value="6.9" id="txt3" /> <input type="text" value="12.7" id="txt4" />
HTML
webui.ready( () => {
const elems = webui("#txt1, #txt2, #txt3, #txt4");
function compareNumbers(a, b) {
return a.value - b.value;
}
const arr = elems.toSorted(compareNumbers);
});
JS
toSpliced (start, deleteCount, item, item, ...)
Creates a new array, inserts elements into it at the start index and optionally deletes elements of an array from the start index, then returns the array modified array. The original array is not changed.
Returns - Array.
Argument
Type
Description
start
Integer
The index to start inserting new elements.
deleteCount
Integer
The number of elements to remove from the start index.
item, item, ...
Object or primative
One or more items to insert.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
let elems = webui("#button1, #button4");
const arr = elems.toSpliced(1, 0, ui("#button2").element(), ui("#button3").element());
});
JS
unshift (elem1, elem2, ...)
Adds elements to the beginning of an array and returns the length of the expanded array.
Returns - Integer
Argument
Type
Description
item, item, ...
Object or primative
One or more items to insert.
<button class="button-sm button-info" id="button1">Button 1</button> <button class="button-sm button-info" id="button2">Button 2</button> <button class="button-sm button-info" id="button3">Button 3</button> <button class="button-sm button-info" id="button4">Button 4</button>
HTML
webui.ready( () => {
let elems = webui("#button3, #button4");
const length = elems.unshift(ui("#button1").element(), ui("#button2").element());
});
JS