Currently I have a bunch of variables that a dozen functions need access to. Here’s a snippet, but the list is bigger than this.
let highSchoolChecked = document.getElementById('highSchoolPack') .checked;
let forRentChecked = document.getElementById('forRentPack') .checked;
let horseRanchChecked = document.getElementById('horseRanchPack') .checked;
let growingTogetherChecked = document.getElementById('growingTogetherPack').checked;
let cottageLivingChecked = document.getElementById('cottageLivingPack') .checked;
let snowyEscapeChecked = document.getElementById('snowyEscapePack') .checked;
let ecoLivingChecked = document.getElementById('ecoLivingPack') .checked;
There seems to be only two ways to get the functions to register them:
function function1() {
let highSchoolChecked = document.getElementById('highSchoolPack').checked;
let forRentChecked = document.getElementById('forRentPack') .checked;
let horseRanchChecked = document.getElementById('horseRanchPack').checked;
}
// or
function function2( highSchoolChecked, forRentChecked, etc )
Is there an easy way to gain access to these where I just have to call one variable rather than 2 dozen?
e.g
function variablesList(){
let highSchoolChecked = document.getElementById('highSchoolPack') .checked;
let forRentChecked = document.getElementById('forRentPack') .checked;
let horseRanchChecked = document.getElementById('horseRanchPack') .checked;
let growingTogetherChecked = document.getElementById('growingTogetherPack').checked;
let cottageLivingChecked = document.getElementById('cottageLivingPack') .checked;
let snowyEscapeChecked = document.getElementById('snowyEscapePack') .checked;
let ecoLivingChecked = document.getElementById('ecoLivingPack') .checked;
}
I tried function function1(variablesList) but it didn’t seem to work. All the different functions are on different js files.
2
You can capture the DOM element references in a single object using a CSS selector and Object.fromEntries
function doSomething(packs) {
// Example use:
console.log(packs.horseRanchPack.checked);
}
document.addEventListener("change", refresh);
function refresh() {
const packs = Object.fromEntries(
Array.from(document.querySelectorAll("[type=checkbox][id*=Pack]"),
el => [el.id, el]
)
);
doSomething(packs);
}Select some options:<br>
<input type="checkbox" id="highSchoolPack">High School Pack<br>
<input type="checkbox" id="forRentPack">For Rent Pack<br>
<input type="checkbox" id="horseRanchPack" checked>Horse Ranch Pack<br>
<input type="checkbox" id="growingTogetherPack">Growing Together Pack<br>
<input type="checkbox" id="cottageLivingPack">Cottage Living Pack<br>
<input type="checkbox" id="snowyEscapePack">Snowy Escape Pack<br>
<input type="checkbox" id="ecoLivingPack">Eco LivingPack Pack<br>
You can return an object of these values from a function, and call this function when you need these values. and because these functions are in different js files, you need to make sure the getVariableStates function is globally accessible and one solution to this is to attach it to the window global object.
window.getVariableStates = function() {
return {
highSchoolChecked: document.getElementById("highSchoolPack").checked,
forRentChecked: document.getElementById("forRentPack").checked,
horseRanchChecked: document.getElementById("horseRanchPack").checked,
// Add all other variables similarly
};
};
When you need these values.
function doSomething() {
const states = getVariableStates();
console.log(states.highSchoolChecked);
console.log(states.forRentChecked);
}