dynamically adding data javascript

Question

I have a problem adding an event to an element, I have in total 2 elements and 2 events, but my second element calls the event that is not connected to it.

i have options and optionsFaturamento ( is a list of elements )

but when I click on one of the children of my options

I call the event my element opition click

problem on snippet:

const data = [
  {
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [
      {
        id: 1,
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        id: 2,
        name: "De 30.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É 50.000,00",
        value: 149.99,
      },
      {
        id: 2,
        name: "De 40.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function createInput(id) {
  let inputRadio = document.createElement("input");

  if (id) {
    inputRadio.id = id;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = id;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createFaturamento() {
  let container = document.querySelector(".faturamento-container");
  let selectedFaturamento = document.querySelector(".faturamentoSelected");

  data.forEach((value) => {
    if (value.id == 1) {
      value.FATURAMENTO.forEach((faturamento) => {
        let optionDiv = document.createElement("div");
        optionDiv.classList.add("options-faturamento");
        container.append(optionDiv);
        let input = createInput(faturamento.id);
        if (!input) {
          return null;
        }
        optionDiv.append(input);
        let label = document.createElement("label");
        label.htmlFor = value.id;
        label.innerHTML = faturamento.name;
        optionDiv.append(label);
        if (faturamento.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.id);
    if (!input) {
      return null;
    }
    optionDiv.append(input);
    var label = document.createElement("label");
    label.htmlFor = 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
  selectedMode.addEventListener("click", () => {
    faturamentoContainer.classList.remove("active");
    container.classList.toggle("active");
  });

  selectedFaturamento.addEventListener("click", () => {
    faturamentoContainer.classList.toggle("active");
  });

  options.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      console.log(o);
      console.log(o.querySelector("label"));
      selectedMode.innerHTML = o.querySelector("label").innerHTML;
      selectedMode.setAttribute("data-value", input);
      container.classList.remove("active");
    });
  });

  optionsFaturamento.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selectedFaturamento.innerHTML = o.querySelector("label").innerHTML;
      selectedFaturamento.setAttribute("data-value", input);
      faturamentoContainer.classList.remove("active");
    });
  });

  //call functions
}
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;
}

            <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>

Barmar · Accepted Answer · 2020-07-13 22:19:09Z

Element IDs need to be unique. You're using faturamento.id as the IDs for some of the inputs, and value.id for other inputs, and these have the same values.

When you create a label with for="1", it will be linked with only one of those inputs, which may not be the one you want it to use.

Add something to the IDs to distinguish them. I use a prefix "feat-" or "value-".

const data = [{
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [{
        id: 1,
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        id: 2,
        name: "De 30.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É 50.000,00",
        value: 149.99,
      },
      {
        id: 2,
        name: "De 40.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function createInput(prefix, id) {
  let inputRadio = document.createElement("input");

  if (id) {
    inputRadio.id = prefix + "-" + id;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = id;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createFaturamento() {
  let container = document.querySelector(".faturamento-container");
  let selectedFaturamento = document.querySelector(".faturamentoSelected");

  data.forEach((value) => {
    if (value.id == 1) {
      value.FATURAMENTO.forEach((faturamento) => {
        let optionDiv = document.createElement("div");
        optionDiv.classList.add("options-faturamento");
        container.append(optionDiv);
        let input = createInput("feat", faturamento.id);
        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);
        }
      });
    }
  });
}

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);
    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
  selectedMode.addEventListener("click", () => {
    faturamentoContainer.classList.remove("active");
    container.classList.toggle("active");
  });

  selectedFaturamento.addEventListener("click", () => {
    faturamentoContainer.classList.toggle("active");
  });

  options.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      console.log(o);
      console.log(o.querySelector("label"));
      selectedMode.innerHTML = o.querySelector("label").innerHTML;
      selectedMode.setAttribute("data-value", input);
      container.classList.remove("active");
    });
  });

  optionsFaturamento.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selectedFaturamento.innerHTML = o.querySelector("label").innerHTML;
      selectedFaturamento.setAttribute("data-value", input);
      faturamentoContainer.classList.remove("active");
    });
  });

  //call functions
}
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;
}

<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>

Hello this seems to have solved it, but the elements of optionsFatamento continue to appear in the options event in the same way the options appear in the options invoicing when I give a console.log
You have label.htmlFor = value.id; should that be label.htmlFor = faturomento.id;?
That's not the whole solution. When I made that change, the second menu stopped working.
No, I haven't figured out the final solution. I don't really understand how the data is related to the HTML and what should be printed.

Collectives™ on Stack Overflow

dynamically adding data javascript

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related