This BloX template demonstrates how you can leverage the input fields to create a simple calculator that can be used for what-if scenarios.
By default, the input fields are populated by the values in the value panel.
The field amounts can be edited by the user by entering new values to see how the outcomes change with the new values.
Technical Overview
This BloX template utilizes a BloX text field script in the output object and a widget script.
The BloX text field script runs the arithmetic on the default values and an event handler in the widget scripts updates the figure when new values are passed.
Widget Script:
widget.on('ready', ()=>{
$('.inputs', element).on('change', function(){
// Get field values
let firstValue = parseFloat($('#f1', element).attr('value'));
let secondValue = parseFloat($('#f2', element).attr('value'));
let thirdValue = parseFloat($('#f3', element).attr('value'));
// Do arithmatic
let outputValue = firstValue + secondValue + thirdValue;
// Round and set values of the output text field
let roundedOutputValue = outputValue.toFixed(2);
$('#output').text(roundedOutputValue);
})
})