CODEWITHSUNDEEP
javascriptdom
Renata P Souza
Renata P Souza

Reputation: 255

generate HTML page using DOM - Javascript

I have a question about generating HTMLpages using DOM and I have the some code to show my question, I try to create the new student with school.prototype.createStudent and the page don´t show anything and when the student is created I need it to appear in list of students with checkbox that when if I want to try to remove and see information, I need to select the students with select checkbox

And I need to follow this examples to create my scripts with DOMand Javascript

enter image description here

function Student(id) {
  this.id = id;
}

function School(id) {
  this.id = id;
  this.index = 0;
  this.students = [];
}

/*School.prototype.createStudent = function() {
    this.students.push(new Student(this.index++);
    };*/


function Unload_Document() {

  var div = document.createElement("div");
  div.id = "school";

  var h1 = document.createElement("h1");
  h1.style.color = "red";

  var title = document.createTextNode("High School");
  h1.appendChild(title);

  var h3 = document.createElement("h3");
  h3.style.color = "blue";

  var subtitle = document.createTextNode("List Of Students:");
  h3.appendChild(subtitle);

  div.appendChild(h1);
  div.appendChild(h3);

  /*if (this.students.length !== 0) {

    for (var i = 0; i < this.students.length; i++) {
      var chkbox = document.createElement("input");
      chkbox.type = "checkbox";
      chkbox.name = "Student" + this.students[i].id;
      chkbox.id = this.students[i].id;
      div.appendChild(chkbox);
    }
  } else {
    return " ";
  }*/


  var btnCreate = document.createElement("button");
  var btnCreateText = document.createTextNode("Create");
  btnCreate.appendChild(btnCreateText);
  btnCreate.onclick = function() {
    School.createStudent();

  }

  var btnRemove = document.createElement("button");
  var btnRemoveText = document.createTextNode("Remove");
  btnRemove.appendChild(btnRemoveText);
  btnRemove.onclick = function() {

  }


  var btnInf = document.createElement("button");
  var btnInfText = document.createTextNode("Student Information");
  btnInf.appendChild(btnInfText);
  btnInf.onclick = function() {

  }

  div.appendChild(btnCreate);
  div.appendChild(btnRemove);
  div.appendChild(btnInf);

  document.body.appendChild(div);
};


window.onload = function() {
  Unload_Document();
};
#school {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}
[id] h1 {
  font-size: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] h3 {
  font-size: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] button {
  margin: 2px;
  background-color: #0000ff;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
<!DOCTYPE html>
<html lang="pt-PT">

<head>
  <meta charset="UTF-8">
  <title>High School</title>
</head>

<body>
  <div id="school"></div>
</body>

</html>

Upvotes: 0

Views: 1246

Answers (1)

Master DJon
Master DJon

Reputation: 1965

This is really not perfect and need to be adjusted, but it works. First of all, you forgot to create your School object (which I did with the variable named school). Second, I moved the loading code within the school creation (some code shall be extracted from there probably). Second, I add a showStudent function (which could be joined to create if initial loading use create too). As suggested by torazaburo, you shall practice yourself more with basic tutorials.

var school = new School(1);

function Student(id) {
  this.id = id;
  this.div = null;
}

function School(id) {
  this.id = id;
  this.index = 0;
  this.students = {};
  this.studentsList = document.createElement('DIV');

  var self = this;
  Unload_Document();

  function Unload_Document() {

    var div = document.createElement("div");
    div.id = "school";

    var h1 = document.createElement("h1");
    h1.style.color = "red";

    var title = document.createTextNode("High School");
    h1.appendChild(title);

    var h3 = document.createElement("h3");
    h3.style.color = "blue";

    var subtitle = document.createTextNode("List Of Students:");
    h3.appendChild(subtitle);

    div.appendChild(h1);
    div.appendChild(h3);

    div.appendChild(self.studentsList);


    var btnCreate = document.createElement("button");
    var btnCreateText = document.createTextNode("Create");
    btnCreate.appendChild(btnCreateText);
    btnCreate.onclick = function() {
      school.createStudent();

    }

    var btnRemove = document.createElement("button");
    var btnRemoveText = document.createTextNode("Remove");
    btnRemove.appendChild(btnRemoveText);
    btnRemove.onclick = function() {
      school.removeStudents();
    }


    var btnInf = document.createElement("button");
    var btnInfText = document.createTextNode("Student Information");
    btnInf.appendChild(btnInfText);
    btnInf.onclick = function() {
      school.studentInformation();
    }

    div.appendChild(btnCreate);
    div.appendChild(btnRemove);
    div.appendChild(btnInf);

    document.body.appendChild(div);
  };

}

School.prototype.createStudent = function() {
  this.students[this.index] = new Student(this.index);
  this.showStudent(this.index);
  this.index++;
};

School.prototype.showStudent = function(id) {
  var div = document.createElement('div');
  div["data-id"] = this.students[id].id;

  var chkbox = document.createElement("input");
  chkbox.type = "checkbox";
  chkbox.name = "Student" + this.students[id].id;
  chkbox.id = chkbox.name;
  div.appendChild(chkbox);

  var chkText = document.createTextNode("Student " + this.students[id].id);
  div.appendChild(chkText);

  this.students[id].div = div;
  this.studentsList.appendChild(div);
};

School.prototype.removeStudents = function(id) {
  //this call the function to remove the students
  var totalRemoved = 0;
  for(var studentElementIndex in this.studentsList.childNodes) {
     var studentElement = this.studentsList.childNodes[studentElementIndex - totalRemoved];
     if (studentElement.childNodes[0].checked) {
        this.removeStudent(studentElement['data-id']);
        totalRemoved++;
     }
  }
};

School.prototype.removeStudent = function(id) {
  //this call the function to remove the students
  if (!this.students[id]) return;

  if (this.students[id].div != null)
     this.studentsList.removeChild(this.students[id].div);

  delete this.students[id];
};


School.prototype.studentInformation = function() {
  //this call the arguments to create the new html pages
  alert("this call the arguments to create the new html pages");
};
#school {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}
[id] h1 {
  font-size: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] h3 {
  font-size: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
[id] button {
  margin: 2px;
  background-color: #0000ff;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
<!DOCTYPE html>
<html lang="pt-PT">

<head>
  <meta charset="UTF-8">
  <title>High School</title>
</head>

<body>
  <div id="school"></div>
</body>

</html>

Upvotes: 1

Related Questions