This is my first time using Javascript, so please forgive me. I'm still not solid on the terminology or best practices, but I'm losing my mind with how complex this script is getting for such a simple thing.
Also if there's a better way, in general, to do what I'm trying to do, let me know because boy I have lost sleep on this one.
Context:
I have a form to build standardized email signatures. The user puts their info into the inputs and then copies the output from a copyable area with standardized styling specific for email markup. In each signature, someone may include the information for another person in their company.
I have a set of radio buttons that enable 0, 1, 2, or 3 additional fieldsets of input for these team members. In addition to adding fieldsets of inputs, they also enable outputs in the copyable area. The outputs have to be "display: none" so that someone who does not include this information in their signature doesn't end up with blank table cells in their copied signature.
https://jsfiddle.net/slingtruchoice/jrem21yb/
Here's the whole, ugly thing. I'm proud but also so not proud of it. Like I said, literally the first time I've ever used javascript. Specifically, I'm looking at this:
var radios = document.getElementsByName('addTeam');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
//--------------------------------- || RADIO BUTTONS || -------------------------------------------
let fieldset = document.getElementsByClassName('sigform-fieldset'), //CLASS fieldset for all radio buttons
inputs = document.getElementsByClassName('sigform-team'), //CLASS all radio buttons
izero = document.getElementById('add-team__0'), //ID radio button, input 0
ione = document.getElementById('add-team__1'), //ID radio button, input 1
itwo = document.getElementById('add-team__2'), //ID radio button, input 2
ithree = document.getElementById('add-team__3'); //ID radio button, input 3
//--------------------------------- || INPUT SECTIONS || -------------------------------------------
let divs = document.getElementsByClassName('sigform__team-inputs'), //CLASS all input wrapper divs
done = document.getElementById('team-inputs__1'), //ID div of input section, team 1
dtwo = document.getElementById('team-inputs__2'), //ID div of input section, team 2
dthree = document.getElementById('team-inputs__3'); //ID div of input section, team 3
//--------------------------------- || SIGNATURE OUTPUT || -------------------------------------------
let // ------------------------ Table Rows -------------------------------------------
teamsrows = document.getElementsByClassName('extraTeamWrap'), //CLASS of tr wrap each output table
teamwrap1 = document.getElementById('extraTeamWrap1'), //ID tr wrap of output table team 1
teamwrap2 = document.getElementById('extraTeamWrap2'), //ID tr wrap of output table team 2
teamwrap3 = document.getElementById('extraTeamWrap3'), //ID tr wrap of output table team 3
// ------------------------ Tables -------------------------------------------
teamtables = document.getElementsByClassName('extraTeamTable'), //CLASS of table for each output
teamtable1 = document.getElementById('extraTeamTable-one'), // ID table wrap of output table team 1
teamtable2 = document.getElementById('extraTeamTable-two'), // ID table wrap of output table team 2
teamtable3 = document.getElementById('extraTeamTable-three'); // ID table wrap of output table team 3
if (ione.checked == false && itwo.checked == false && ithree.checked == false || izero.checked == true){
done.style.display = 'none';
dtwo.style.display = 'none';
dthree.style.display = 'none';
teamsrows.style.display = 'none';
} else if (ione.checked == true && itwo.checked == false && ithree.checked == false) {
done.style.display = 'block';
teamsrows.style.display = "block";
dtwo.style.display = 'none';
dthree.style.display = 'none';
} else if (ione.checked == false && itwo.checked == true && ithree.checked == false) {
done.style.display = 'block';
dtwo.style.display = 'block';
dthree.style.display = 'none';
} else if (ione.checked == false && itwo.checked == false && ithree.checked == true) {
done.style.display = 'block';
dtwo.style.display = 'block';
dthree.style.display = 'block';
} else {
return false;
}
});
}
And it's not even done. (Oh yeah, by the way, please don't expect this fiddle to work. It's far from there.)
How do I go about this better? I'm having difficulty googling answers for my questions since I don't really know how to say "how to make an argument equal to multiple IDs that are paired specifically with other IDs to do something to that ID when the other ID is activated... +javascript" in a way that yields useful results.
My only request is that any explanation come in very simple language. I really can't iterate enough how much of an absolute beginner I am. Most responses on StackExchange I've found for other questions have just blown right over my head.
And really, thank you for any help you're able to give!
The answer to this question has ended up being to reframe the way I build functions, which is what I expected.
Instead of just doing switchClass functions with a million variables, I ended up learning about loops and using variables set as strings containing HTML that I used .replace to dynamically populate these templates with user-input content each time they click the button.
I would put the code in this post, but it's too large unfortunately.
Here's a replit: https://replit.com/@slingtc/Email-Signature?v=1