CODEWITHSUNDEEP
javascripthtmlfor-loopdom
ITBYD
ITBYD

Reputation: 93

JavaScript DOM - for loop add li to HTML

I have index.html file with the element

<li id="network"></li>

and Javascript file with for loop

for ( let i = 0 ; i <= usableSubnets ; i++){
    if (lastnumber < 256)
    {
        document.getElementById('network').textContent += "\nNetowrk "+ipAddr[0]+"."+ipAddr[1]+"."+ipAddr[2]+"."+lastnumber + "\n";
        document.getElementById('network').textContent += "\nRange "+ipAddr[0]+"."+ipAddr[1]+"."+ipAddr[2]+"."+(lastnumber+1)+" - " +(lastnumber + jumps -2 ) + "\n";
        lastnumber += jumps;
    }

I want to have new li element for each loop , like this

first line
second line
third line
4th line

but im getting all in one line

first line second line third line 4th line

how can i achieve that ?

FULL CODE :

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  const ip = document.getElementById('ipAddr').value;
  const hosts = document.getElementById('hostNumber').value;
  //const ip = "10.30.100.5"; // 192.168.116.0
  const ipAddr = ip.split("."); // 192,168,116,0
  //const hosts = 50; // 30
  const subnetDescNumbers = [128, 64, 32, 16, 8, 4, 2, 1]; // 0 1 2 3 4 5 6 7 

  let defaultSubnet = '255.255.255.'
  let prefix;
  let bitsForHosts;
  let decNumber = 0;
  let newSubnet;
  let jumps;
  let lastnumber = 0;

  var nameInput = document.getElementById('ipAddr');

  let bitsForSubnet = Math.ceil(Math.log2(hosts)); // 5
  //console.log(`bitsForSubnet = ${bitsForSubnet}`);


  bitsForHosts = 8 - bitsForSubnet; // 3
  //console.log(`bitsForHosts = ${bitsForHosts}`);


  prefix = 24 + bitsForHosts; // 27
  //console.log(`prefix = ${prefix}`);


  let usableSubnets = Math.pow(2, bitsForHosts); // 8
  //console.log(`usableSubnets = ${usableSubnets}`);

  for (let i = 0; i < bitsForHosts; i++) {
    decNumber = subnetDescNumbers[i] + decNumber; // 224
  }

  newSubnet = defaultSubnet + decNumber; // 255.255.255.224
  //console.log(`New Full Subnet ${newSubnet}`);

  jumps = 256 - decNumber;
  //console.log(`Jumps : ${jumps}`);

  console.log(`Network Address : ${ip}/${newSubnet}\nPrefix: /${prefix}`);


  const info = [0, 0]
  for (let i = 0; i <= usableSubnets; i++) {
    if (lastnumber < 256) {
      document.getElementById('network').textContent += "\nNetowrk " + ipAddr[0] + "." + ipAddr[1] + "." + ipAddr[2] + "." + lastnumber + "\n";
      document.getElementById('network').textContent += "\nRange " + ipAddr[0] + "." + ipAddr[1] + "." + ipAddr[2] + "." + (lastnumber + 1) + " - " + (lastnumber + jumps - 2) + "\n";
      lastnumber += jumps;
    }
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Subneting</title>
</head>

<body>
  <main>
    <header class="header-banner" id="io0e">
      <link rel="stylesheet" href="style.css" />
      <div class="container-width" id="i6my">
        <div class="logo-container" id="izpo">
        </div>
        <div class="lead-title" id="i8n65">Subneting
          <br/>
        </div>
        <div class="sub-lead-title" id="iyaen">Get Subnet mask from IP address and requirement hosts
          <br/>
        </div>
      </div>
    </header>
    <form class="form" id="ixntd1">
      <div class="form-group" id="isbg5v">
        <label class="label" id="i1808a">IP Address</label>
        <input placeholder="Enter Ip Adress" class="input" id="ipAddr" />
      </div>
      <div class="form-group">
        <label class="label" id="iiemwf">Number of Requested Hosts</label>
        <input placeholder="" class="input" id="hostNumber" />
      </div>
      <div class="form-group">
        <button type="submit" class="button" id="submit_btn">Send</button>
      </div>
      <li id="network"></li>
    </form>

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

</html>

Upvotes: 1

Views: 967

Answers (1)

Doğukan Akkaya
Doğukan Akkaya

Reputation: 503

You can't create list or any other dom elements like this. You'll have to use innerHTML or appendChild for this.

Create a ul first instead of li because ul tag is the container for li's.

<ul id="network"></ul>

And then just change the inner html of ul to add new li tags.

document.getElementById('network').innerHTML += "<li>Network " + ipAddr[0] + "</li>";

By the way selecting dom elements is expensive, so i recommend you to select elements once and use them from variable like:

const networkElement = document.getElementById('network');

Also a tip: instead of rebuilding the dom with innerHTML you might think to use appendChild or insertAdjacentHTML functions.

Upvotes: 3

Related Questions