Id is not displaying in insertAdjacent Method in JavaScript

Question

Everything is working fine but in the last line my id is not displaying. It's displaying like %id% not the actual data.

PROBLEMS

I want to start the id from 1 but it's starting from 0. I can't understand how to make it start from 1.
Id is not displaying by insertAdjacentHTML. It's in the last line in the js code.

//Constructor for student form
var studentForm = function(iD, name, city, college, course, age) {
  this.id = iD;
  this.name = name;
  this.city = city;
  this.college = college;
  this.course = course;
  this.age = age;
}
//all data store here as object
var data = [];

//function to submit and display form
var submitForm = function() {

  //getInput data from the field
  var getInput = {
    name: document.querySelector('.name').value,
    city: document.querySelector('.city').value,
    college: document.querySelector('.college').value,
    course: document.querySelector('.course').value,
    age: document.querySelector('.age').value,
  }

  //store the data which you get previous to use that
  var input = getInput;
  //Create a new id
  var ID;
  if (data.length > 0) {
    ID = data[data.length - 1].id + 1;
  } else {
    ID = 0;
  }
  //Use the constructor and make a new data
  var newForm = new studentForm(ID, input.name, input.city, input.college, input.course, input.age);
  //Add the student data into the ds
  data.push(newForm);
  //Display the data in the Document
  //html line to display data of object
  var html = '<tr><td class="id-%id%">%id%</td><td class="tname">%name%</td><td class="tcity">%city%</td><td class="tcollege">%college%</td><td class="tcourse">%course%</td><td class="tage">%age%</td></tr>';
  //Replace the placeHOlder With actual data
  var newHtml = html;
  newHtml = newHtml.replace('%id%', ID);
  newHtml = newHtml.replace('%name%', input.name);
  newHtml = newHtml.replace('%city%', input.city);
  newHtml = newHtml.replace('%college%', input.college);
  newHtml = newHtml.replace('%course%', input.course);
  newHtml = newHtml.replace('%age%', input.age);
  //Get the element which after you wants to print the data
  document.querySelector('.table-heading').insertAdjacentHTML('afterend', newHtml);

  console.log(newForm);
  return newForm;
}


document.querySelector('.btn').addEventListener('click', submitForm);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Form</title>
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    tr:nth-child(even) {
      background-color: #dddddd;
    }
  </style>
</head>

<body>
  <input type="text" placeholder="name" class="name">
  <input type="text" placeholder="city" class="city">
  <input type="text" placeholder="college" class="college">
  <input type="text" placeholder="Course" class="course">
  <input type="number" placeholder="age" class="age">
  <input type="button" class="btn" value="submit">
  <div class="table">
    <table class="tablemain">
      <tr class="table-heading">
        <th>ID</th>
        <th>Name</th>
        <th>City</th>
        <th>College</th>
        <th>Course</th>
        <th>Age</th>
      </tr>
    </table>
  </div>

For the %id%: [How to replace all occurrences of a string?](https://stackoverflow.com/q/1144783/215552). For the id starting with 0, you specifically set it to 0 in the line `ID = 0`. Use `ID = 1` instead. — Heretic Monkey, Apr 01 '20 at 13:15
Does this answer your question? [How to replace all occurrences of a string?](https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string) — Heretic Monkey, Apr 01 '20 at 13:15
I have try that but that does not work for me. If you see the id in the console its increament but the id number is not showing in the table all other objects like name city course college age are showing but no the id — Azeez, Apr 01 '20 at 13:48
How do you know if it does not work for you if you haven't tried it? — Heretic Monkey, Apr 01 '20 at 13:49
I have tried that before i did that but does not work for me — Azeez, Apr 01 '20 at 13:52
There are 63 answers on that question; there is no "that". Try running the following in the console: `"%id%".replace(/%id%/g, 1)`. — Heretic Monkey, Apr 01 '20 at 13:56
i am sorry sir but the mistake i was doing was comparing it with one if(data.length > 1){ ID = data[data.length - 1].id +1; }else{ ID =1; } — Azeez, Apr 01 '20 at 13:56
Thanks you so much sir its working for me but in oppsite dircetion i mean it should be print like 1 2 3 but its printing like 3 2 1 — Azeez, Apr 01 '20 at 14:00
That's `document.querySelector('.table-heading').insertAdjacentHTML('afterend', newHtml);` You're inserting after the end of the table heading row, which is before any existing rows. You probably want `document.querySelector('.tablemain').insertAdjacentHTML('beforeend', newHtml);` so that it's added before the ending ``. — Heretic Monkey, Apr 01 '20 at 14:11

score 0 · Answer 1 · answered Apr 01 '20 at 14:21

0

.replace() function will only replace the first occurrence, so to make this example work just remove %id% from class attribute.

Before: class="id-%id%" 
After:  class="id"

Demo: Jsfiddle

answered Apr 01 '20 at 14:21

Sunny Puri

1
1

Id is not displaying in insertAdjacent Method in JavaScript

1 Answers1