@hube2, thanks for the links. I had looked over those links, before posting this, but your suggestion confirmed my choice of approach.
I was able to figure it out after a few hours.
For those trying something similar, I ended up included this in the theme functions.php file, but be sure to load it correctly in your script stack:
function my_admin_enqueue_scripts() {
wp_enqueue_script( 'katalyst-admin-js', get_template_directory_uri() . '/js/admin.js', array(), '1.0.0', true );
}
My admin.js file looked like this:
// Scoring Averages, on Load
acf.add_action('ready', function( $el ){
// $el will be equivalent to $('body')
// Relevancy Calculation
// Selects all Relevancy input fields (html node list)
const relevancyElements = [...document.querySelectorAll('.relevancy-data input')];
// Function to calculate Relevancy
function relevancyCalc() {
// Creates an array of values from the selected input field html (usable values)
var relevancyScores = relevancyElements.map(function (obj) {
return obj.value;
});
// Function to remove values outside of the 1-5 range also which removes null and undefined
function hasValue(value) {
return Number(value >= 1 && value <= 5);
}
// Filters values based on the above function (1-5, no null or undefined)
var relevancyFiltered = relevancyScores.filter(hasValue);
// Calculating total of comlpeted values (number)
var relevancyTotal = 0;
for(var i = 0; i < relevancyFiltered.length; i++) {
relevancyTotal = relevancyTotal + Number(relevancyFiltered[i]);
}
// Calculating the average of completed values (number)
var relevancyAverage = relevancyTotal / relevancyFiltered.length;
// Removing all but two decimals
var relevancyAverageDecimals = relevancyAverage.toFixed(2);
// Updates the average field
document.querySelector('#relevancy-average p').innerHTML = relevancyAverageDecimals;
// Show values in console
console.log(relevancyScores);
console.log(relevancyFiltered);
console.log(relevancyAverageDecimals);
}
// Run the function on Load
relevancyCalc();
// Adding event listeners to each element, on Load, to run the function again when a value is updated
for (var i = 0 ; i < relevancyElements.length; i++) {
relevancyElements[i].addEventListener('input' , relevancyCalc , false ) ;
}
});
Essentially, the code checks over each number field, per scoring section (ex: ‘.relevancy-data input’), maps the values into an array, filters out any results outside of the scoring range (1-5, which also removes NAN and undefined to better calculate the average as the fields are completed), averages the values, trims them to 2 decimals, and updates a message field with the average as inputs are entered.
Definitely a lot of work, but a good exercise for a designer-dev like myself.
Thanks again for the help, John.
Cheers,
Matt
