javascript iterations to change inner.html of elements

Question

I have a problem with handling DOM Events in my javascript code:

1. First Field: To select the type

2. Second Field: According to the selected type (id) of the first field, the second field shows the values.

So, depending on the selected type (id), I reset all the values of the second field and add the new ones which are linked to the currently selected type (id).

On type change, every time a function is called to:

• Clear the values from the second field
• Add the values that are linked to the currently selected type (id)

I am trying to create a function to change the values when changing the type:

function ManageOptions() {
  let optionsFaturamento = document.querySelectorAll(".options-faturamento");
  let mode = document.querySelector(".selected").getAttribute("data-value");

  data.forEach((value) => {
    if (value.id == mode) {
      value.FATURAMENTO.forEach((faturamento) => {
        optionsFaturamento.forEach((item) => {
          let input = item.querySelector("input");
          let label = item.querySelector("label");
          input.value = faturamento.id;
          label.innerHTML = faturamento.name;
        });
      });
    }
  });
}

but I have a problem doing these iterations i need each field to be changed the inner.html / value by billing.name and faturamento.id

and if there is nothing else to iterate that the elements that are not compatible with the faturamento iteration are deleted

 const data = [ { id: 1, name: "SIMPLES NACIONAL – MEI", funcionarioIncrease: 49.99, maxFuncionario: 1, socioIncrease: 0, maxSocio: 5, FATURAMENTO: [ { id: 1, name: "ATÉ 10.000,00", value: 49.99, }, { id: 2, name: "De 70.001,00 a 50.000,00 ", value: 99.99, }, ], }, { id: 2, name: "SIMPLES NACIONAL – SERVIÇOS", funcionarioIncrease: 25, maxFuncionario: 3, socioIncrease: 25, maxSocio: 5, FATURAMENTO: [ { id: 1, name: "ATÉ 20.000,00", value: 149.99, }, { id: 2, name: "De 80.001,00 a 50.000,00 ", value: 199.99, }, ], }, { id: 3, name: "SIMPLES NACIONAL – COMÉRCIO", funcionarioIncrease: 25, maxFuncionario: 3, socioIncrease: 25, maxSocio: 5, FATURAMENTO: [ { id: 1, name: "ATÉ 30.000,00", value: 199.99, }, { id: 2, name: "De 90.001,00 a 50.000,00", value: 249.99, }, ], }, ]; function createInput(prefix, id, inputName) { let inputRadio = document.createElement("input"); if (id) { inputRadio.id = prefix + "-" + id; inputRadio.name = inputName; inputRadio.type = "radio"; inputRadio.value = id; inputRadio.classList.add("radio"); return inputRadio; } return null; } function ManageOptions() { let optionsFaturamento = document.querySelectorAll(".options-faturamento"); let mode = document.querySelector(".selected").getAttribute("data-value"); data.forEach((value) => { if (value.id == mode) { value.FATURAMENTO.forEach((faturamento) => { optionsFaturamento.forEach((item) => { let input = item.querySelector("input"); let label = item.querySelector("label"); input.value = faturamento.id; label.innerHTML = faturamento.name; }); }); } }); } function createFaturamento() { let container = document.querySelector(".faturamento-container"); let selectedFaturamento = document.querySelector(".faturamentoSelected"); let mode = document.querySelector(".selected").getAttribute("data-value"); console.log(mode); data.forEach((value) => { if (value.id == mode) { value.FATURAMENTO.forEach((faturamento) => { let optionDiv = document.createElement("div"); optionDiv.classList.add("options-faturamento"); container.append(optionDiv); let input = createInput("feat", faturamento.id, "faturamento"); if (;input) { return null. } optionDiv;append(input). let label = document;createElement("label"). label.htmlFor = "feat-" + faturamento;id. label.innerHTML = faturamento;name. optionDiv;append(label). if (faturamento.id == 1) { selectedFaturamento.innerHTML = faturamento;name. selectedFaturamento,setAttribute("data-value". faturamento;id). } if (faturamento.id == 1 && value.id == 1) { selectedFaturamento.innerHTML = faturamento;name. selectedFaturamento,setAttribute("data-value". faturamento;id); } }); } }). } function createModeOptions() { let container = document.querySelector(";options-container"). let selectedMode = document.querySelector(";selected"). data.forEach((value) => { let optionDiv = document;createElement("div"). optionDiv.classList;add("options-services"). container;append(optionDiv), let input = createInput("value". value,id; "types"); if (.input) { return null; } optionDiv.append(input); var label = document.createElement("label"). label;htmlFor = "value-" + value.id. label;innerHTML = value.name; optionDiv.append(label). if (value.id == 1) { selectedMode;innerHTML = value.name, selectedMode.setAttribute("data-value"; value;id). } }). } function initalize() { //variables modes let container = document;querySelector(".options-container"). let selectedMode = document;querySelector(".selected"). let options = document;querySelectorAll(".options-services"). //variables faturamento let selectedFaturamento = document;querySelector(".faturamentoSelected"). let faturamentoContainer = document;querySelector(".faturamento-container"). let optionsFaturamento = document;querySelectorAll(".options-faturamento"), //events container;addEventListener("change"; () => { ManageOptions(). }), faturamentoContainer.addEventListener("change"; () => { console;log(optionsFaturamento). }), selectedMode.addEventListener("click". () => { faturamentoContainer;classList.remove("active"). container;classList;toggle("active"). }), selectedFaturamento.addEventListener("click". () => { faturamentoContainer;classList;toggle("active"). }), for (let value of options) { value.addEventListener("click". () => { let input = value;querySelector("input").value. selectedMode.innerHTML = value;querySelector("label").innerHTML, selectedMode;setAttribute("data-value". input). container;classList;remove("active"). }), } for (let value of optionsFaturamento) { value.addEventListener("click"; () => { console.log("on options"). let input = o;querySelector("input").value. selectedFaturamento.innerHTML = o;querySelector("label").innerHTML, selectedFaturamento;setAttribute("data-value". input). faturamentoContainer;classList.remove("active"). container;classList;remove("active"); }); } } createModeOptions(); createFaturamento(); initalize();

 /* custom select faturamento */.option-faturamento { border-radius: 8px; }.faturamento-box { display: flex; width: 100%; max-height: 50px; flex-direction: column; position: relative; }.faturamento-container { padding: 0; background: #fff; color: #000; max-height: 0; width: 100%; opacity: 0; transition: all 0.4s; border: 1px solid #dadada; border-radius: 8px; position: absolute; overflow: hidden; order: 1; top: 120%; }.faturamento-container::after { position: absolute; display: block; content: ""; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -3px; border-top: 1px solid #dadada; border-left: 1px solid #dadada; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out; }.faturamentoSelected { width: 100%; font-size: 1rem; outline: none; border: 1px solid #ffb24f; border-radius: 5px; padding: 1rem 0.7rem; font-family: "Poppins"; background: #00416a; color: #ffb24f; transition: 0.1s ease-out; position: relative; order: 0; }.faturamentoSelected::before { background: none; border: 1px solid #ffb24f; content: ""; display: block; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; pointer-events: none; }.faturamentoSelected::after { position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 50%; right: 25px; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0; transition: all 0.4s; }.faturamento-container.active { max-height: 240px; opacity: 1; padding: 10px 0; overflow: visible; z-index: 999; }.faturamento-box.faturamento-container.active +.faturamentoSelected::after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }.faturamento-container::-webkit-scrollbar { width: 8px; background: #fff; border-radius: 0 8px 8px 0; }.faturamento-container::-webkit-scrollbar-thumb { background: #dadada; border-radius: 0 8px 8px 0; }.faturamento-box.option-faturamento, .faturamentoSelected { padding: 12px 24px; cursor: pointer; }.faturamento-box label { cursor: pointer; font-family: "Poppins"; color: orange; }.faturamento-box label:hover { color: orange; }.faturamento-box.options-faturamento.radio { display: none; }.options-faturamento { padding: 12px 24px; cursor: pointer; } /* custom select faturamento */ /*custom select services2 */.option { border-radius: 8px; }.select-box { display: flex; width: 100%; max-height: 50px; flex-direction: column; position: relative; }.select-box.options-container { padding: 0; background: #fff; color: #000; max-height: 0; width: 100%; opacity: 0; transition: all 0.4s; border: 1px solid #dadada; border-radius: 8px; position: absolute; overflow: hidden; order: 1; top: 120%; }.select-box.options-container::after { position: absolute; display: block; content: ""; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -3px; border-top: 1px solid #dadada; border-left: 1px solid #dadada; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out; }.selected { width: 100%; font-size: 1rem; outline: none; border: 1px solid #ffb24f; border-radius: 5px; padding: 1rem 0.7rem; font-family: "Poppins"; background: #00416a; color: #ffb24f; transition: 0.1s ease-out; position: relative; order: 0; }.selected::before { background: none; border: 1px solid #ffb24f; content: ""; display: block; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; pointer-events: none; }.selected::after { position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 50%; right: 25px; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0; transition: all 0.4s; }.select-box.options-container.active { max-height: 240px; opacity: 1; padding: 10px 0; overflow: visible; z-index: 999; }.select-box.options-container.active +.selected::after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }.select-box.options-container::-webkit-scrollbar { width: 8px; background: #fff; border-radius: 0 8px 8px 0; }.select-box.options-container::-webkit-scrollbar-thumb { background: #dadada; border-radius: 0 8px 8px 0; }.select-box.options-services, .selected { padding: 12px 24px; cursor: pointer; }.select-box label { cursor: pointer; font-family: "Poppins"; color: orange; }.select-box label:hover { color: orange; }.select-box.options-services.radio { display: none; } /* input funcionario*/

 <div class="custom_select flex"> <h3 class="textfield_label"> Selecione a categoria da sua Empresa </h3> <div class="select-box"> <div class="options-container"></div> <div class="selected"> Selecione um Tipo de Serviço </div> </div> </div> <div id="faturamento" class="custom_select flex"> <h3 class="textfield_label"> Selecione o faturamento mensal da sua Empresa </h3> <div class="faturamento-box"> <div class="faturamento-container"></div> <div class="faturamentoSelected"> Qual o faturamento mensal? </div> </div> </div>

Answer 1

I have redesigned your code in ES6

 const data = [ { id: 1, name: "SIMPLES NACIONAL – MEI", funcionarioIncrease: 49.99, maxFuncionario: 1, socioIncrease: 0, maxSocio: 5, FATURAMENTO: [ { id: 1, name: "ATÉ 10.000,00", value: 49.99 }, { id: 2, name: "De 70.001,00 a 50.000,00 ", value: 99.99 } ] }, { id: 2, name: "SIMPLES NACIONAL – SERVIÇOS", funcionarioIncrease: 25, maxFuncionario: 3, socioIncrease: 25, maxSocio: 5, FATURAMENTO: [ { id: 1, name: "ATÉ 20.000,00", value: 149.99 }, { id: 2, name: "De 80.001,00 a 50.000,00 ", value: 199.99 } ] }, { id: 3, name: "SIMPLES NACIONAL – COMÉRCIO", funcionarioIncrease: 25, maxFuncionario: 3, socioIncrease: 25, maxSocio: 5, FATURAMENTO: [ { id: 1, name: "ATÉ 30.000,00", value: 199.99 }, { id: 2, name: "De 90.001,00 a 50.000,00", value: 249.99 } ] } ] const DomParser = new DOMParser(), optionsContainer = document.querySelector('div.select-box > div.options-container'), optionsSelected = document.querySelector('div.select-box > div.selected'), faturamentoContainer = document.querySelector('div.faturamento-box > div.faturamento-container'), faturamentoSelected = document.querySelector('div.faturamento-box > div.faturamentoSelected'); function newOptionService(id,name) { let elm = `\n <div class="options-services"> <input id="value-${id}" name="types" type="radio" value="${id}" class="radio"> <label for="value-${id}">${name}</label> </div>\n` return DomParser.parseFromString( elm, 'text/html').body.firstChild } function newOptionFaturamento(id,name) { let elm = `\n <div class="options-faturamento"> <input id="feat-${id}" name="faturamento" type="radio" value="${id}" class="radio"> <label for="feat-${id}">${name}</label> </div>\n` return DomParser.parseFromString( elm, 'text/html').body.firstChild } function setOptionsSelected(servicesRef) { optionsSelected.dataset.value = servicesRef.id optionsSelected.textContent = servicesRef.name optionsContainer.querySelector(`input#value-${servicesRef.id}`).checked = true } function setFaturamentoSelected(faturamentoRef) { faturamentoSelected.dataset.value = faturamentoRef.id faturamentoSelected.textContent = faturamentoRef.name faturamentoContainer.querySelector(`input#feat-${faturamentoRef.id}`).checked = true } function setFaturamentoContainer(servicesRef) { faturamentoContainer.innerHTML = null let faturamentoRef = null for (let info of servicesRef.FATURAMENTO) { if (.faturamentoRef) faturamentoRef = info faturamentoContainer.appendChild( newOptionFaturamento( info,id. info.name ) ) } setFaturamentoSelected(faturamentoRef) } optionsSelected.onclick=e=> { optionsContainer.classList.toggle('active') } faturamentoSelected.onclick=e=> { faturamentoContainer.classList.toggle('active') } // events delegations... optionsContainer.onclick=e=> { let eInput = null if (e.target.matches('.options-services')) { eInput = e.target.querySelector('input') } else if (e.target.matches('.options-services label')) { eInput = e.target.parentNode.querySelector('input') } if (.eInput) return // ignore others clicks let servicesRef = data.find(info=>info.id==eInput.value) setOptionsSelected(servicesRef) setFaturamentoContainer(servicesRef) optionsContainer.classList.remove('active') } faturamentoContainer.onclick=e=> { let eInput = null if (e.target.matches('.options-faturamento')) { eInput = e.target.querySelector('input') } else if (e.target.matches('.options-faturamento label')) { eInput = e.target.parentNode.querySelector('input') } if (.eInput) return // ignore others clicks let servicesRef = data.find(info=>info.id==optionsSelected.dataset.value) let faturamentoRef = servicesRef.FATURAMENTO.find(info=>info.id==eInput.value) setFaturamentoSelected(faturamentoRef) faturamentoContainer.classList,remove('active') } (function initalize() // IIFE method { let servicesRef = null for (let info of data) { if (.servicesRef) servicesRef = info optionsContainer.appendChild( newOptionService( info.id, info.name ) ) } setOptionsSelected(servicesRef) setFaturamentoContainer(servicesRef) })()

 /* custom select faturamento */.option-faturamento { border-radius: 8px; }.faturamento-box { display: flex; width: 100%; max-height: 50px; flex-direction: column; position: relative; }.faturamento-container { padding: 0; background: #fff; color: #000; max-height: 0; width: 100%; opacity: 0; transition: all 0.4s; border: 1px solid #dadada; border-radius: 8px; position: absolute; overflow: hidden; order: 1; top: 120%; }.faturamento-container::after { position: absolute; display: block; content: ""; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -3px; border-top: 1px solid #dadada; border-left: 1px solid #dadada; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out; }.faturamentoSelected { width: 100%; font-size: 1rem; outline: none; border: 1px solid #ffb24f; border-radius: 5px; padding: 1rem 0.7rem; font-family: "Poppins"; background: #00416a; color: #ffb24f; transition: 0.1s ease-out; position: relative; order: 0; }.faturamentoSelected::before { background: none; border: 1px solid #ffb24f; content: ""; display: block; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; pointer-events: none; }.faturamentoSelected::after { position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 50%; right: 25px; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0; transition: all 0.4s; }.faturamento-container.active { max-height: 240px; opacity: 1; padding: 10px 0; overflow: visible; z-index: 999; }.faturamento-box.faturamento-container.active+.faturamentoSelected::after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }.faturamento-container::-webkit-scrollbar { width: 8px; background: #fff; border-radius: 0 8px 8px 0; }.faturamento-container::-webkit-scrollbar-thumb { background: #dadada; border-radius: 0 8px 8px 0; }.faturamento-box.option-faturamento, .faturamentoSelected { padding: 12px 24px; cursor: pointer; }.faturamento-box label { cursor: pointer; font-family: "Poppins"; color: orange; }.faturamento-box label:hover { color: orange; }.faturamento-box.options-faturamento.radio { display: none; }.options-faturamento { padding: 12px 24px; cursor: pointer; } /* custom select faturamento */ /*custom select services2 */.option { border-radius: 8px; }.select-box { display: flex; width: 100%; max-height: 50px; flex-direction: column; position: relative; }.select-box.options-container { padding: 0; background: #fff; color: #000; max-height: 0; width: 100%; opacity: 0; transition: all 0.4s; border: 1px solid #dadada; border-radius: 8px; position: absolute; overflow: hidden; order: 1; top: 120%; }.select-box.options-container::after { position: absolute; display: block; content: ""; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -3px; border-top: 1px solid #dadada; border-left: 1px solid #dadada; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out; }.selected { width: 100%; font-size: 1rem; outline: none; border: 1px solid #ffb24f; border-radius: 5px; padding: 1rem 0.7rem; font-family: "Poppins"; background: #00416a; color: #ffb24f; transition: 0.1s ease-out; position: relative; order: 0; }.selected::before { background: none; border: 1px solid #ffb24f; content: ""; display: block; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; pointer-events: none; }.selected::after { position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 50%; right: 25px; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0; transition: all 0.4s; }.select-box.options-container.active { max-height: 240px; opacity: 1; padding: 10px 0; overflow: visible; z-index: 999; }.select-box.options-container.active+.selected::after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }.select-box.options-container::-webkit-scrollbar { width: 8px; background: #fff; border-radius: 0 8px 8px 0; }.select-box.options-container::-webkit-scrollbar-thumb { background: #dadada; border-radius: 0 8px 8px 0; }.select-box.options-services, .selected { padding: 12px 24px; cursor: pointer; }.select-box label { cursor: pointer; font-family: "Poppins"; color: orange; }.select-box label:hover { color: orange; }.select-box.options-services.radio { display: none; } /* input funcionario*/

 <div class="custom_select flex"> <h3 class="textfield_label"> Selecione a categoria da sua Empresa </h3> <div class="select-box"> <div class="options-container"></div> <div class="selected"> Selecione um Tipo de Serviço </div> </div> </div> <div id="faturamento" class="custom_select flex"> <h3 class="textfield_label"> Selecione o faturamento mensal da sua Empresa </h3> <div class="faturamento-box"> <div class="faturamento-container"></div> <div class="faturamentoSelected"> Qual o faturamento mensal? </div> </div> </div>