CODEWITHSUNDEEP
javascripthtmldom-manipulation
nicolo orcine
nicolo orcine

Reputation: 65

Append Element using DOM manipulation cannot loop through using querySelector

I'm trying to loop through the element that i create using DOM manipulation. it was successfully reflected in the html page but when i loop through in it using queryselector, its not looping. I also tried using getElementByClassName and still not looping.

here is the part of the code which I'm pointing out:

I also attached the whole javascript code with html for reference:

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");

window.addEventListener('DOMContentLoaded', () => {
  createNewOption1();
  createNewOption2();

});

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});


const createNewOption1 = () => {
  const div1 = document.createElement('div');
  const input1 = document.createElement('input');
  const label1 = document.createElement('label');

  div1.className = 'option';
  input1.type = 'radio';
  input1.className = 'radio';
  input1.name = 'category';

  label1.htmlFor = 'Rejuvenating';
  label1.innerHTML = 'Rejuvenating Set';


  div1.appendChild(input1);
  div1.appendChild(label1);
  optionsContainer.appendChild(div1);
}

const createNewOption2 = () => {
  const div2 = document.createElement('div');
  const input2 = document.createElement('input');
  const label2 = document.createElement('label');

  div2.className = 'option';
  input2.type = 'radio';
  input2.className = 'radio';
  input2.name = 'category';

  label2.htmlFor = 'Maintenance';
  label2.innerHTML = 'Maintenance Set';


  div2.appendChild(input2);
  div2.appendChild(label2);
  optionsContainer.appendChild(div2);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Database Project</title>
  <script src="https://kit.fontawesome.com/d6307e6979.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h2>Sales</h2>

    <div class="select-box">
      <div class="options-container">

      </div>
      <div class="selected">
        <p>Select Item</p>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>

Upvotes: 0

Views: 141

Answers (1)

Barmar
Barmar

Reputation: 782105

You're creating the options in the DOMContentLoaded event listener. But you're calling querySelectorAll(".option") outside the listener, so the options don't exist yet. Move that code inside the listener.

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");

window.addEventListener('DOMContentLoaded', () => {
  createNewOption1();
  createNewOption2();
  const optionsList = document.querySelectorAll(".option");
  optionsList.forEach(o => {
    o.addEventListener("click", () => {
      selected.innerHTML = o.querySelector("label").innerHTML;
      optionsContainer.classList.remove("active");
    });
  });
});

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");
});

const createNewOption1 = () => {
  const div1 = document.createElement('div');
  const input1 = document.createElement('input');
  const label1 = document.createElement('label');

  div1.className = 'option';
  input1.type = 'radio';
  input1.className = 'radio';
  input1.name = 'category';

  label1.htmlFor = 'Rejuvenating';
  label1.innerHTML = 'Rejuvenating Set';


  div1.appendChild(input1);
  div1.appendChild(label1);
  optionsContainer.appendChild(div1);
}

const createNewOption2 = () => {
  const div2 = document.createElement('div');
  const input2 = document.createElement('input');
  const label2 = document.createElement('label');

  div2.className = 'option';
  input2.type = 'radio';
  input2.className = 'radio';
  input2.name = 'category';

  label2.htmlFor = 'Maintenance';
  label2.innerHTML = 'Maintenance Set';


  div2.appendChild(input2);
  div2.appendChild(label2);
  optionsContainer.appendChild(div2);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Database Project</title>
  <script src="https://kit.fontawesome.com/d6307e6979.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h2>Sales</h2>

    <div class="select-box">
      <div class="options-container">

      </div>
      <div class="selected">
        <p>Select Item</p>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>

Upvotes: 1

Related Questions