generate HTML page using DOM - Javascript

Question

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

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>

my question, if is possible create web page with DOM like the image without add new codes in web page, or I need to create the script in html page,? — Renata P Souza
– Renata P Souza, Commented May 9, 2016 at 2:07
Suggest you go back and start off very slowly with some basic web programming tutorials. — user663031
– user663031, Commented May 9, 2016 at 2:27

Master DJon · Accepted Answer · 2016-05-09 12:18:40Z

1

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>

edited May 9, 2016 at 12:18

answered May 9, 2016 at 3:00

Master DJon

1,9753 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Renata P Souza Over a year ago

Thanks, @Master DJon and the function removeStudent to select the checkbox to eliminate the student,

Renata P Souza Over a year ago

and the function studentInformation to forward to another page that shows the student information that I will create later using DOM, only this two function the rest I made, because the logic is the same

Master DJon Over a year ago

I added the remove functionality, but if you want to learn, I let you do the information one. All your answers to do it are next door.

Renata P Souza Over a year ago

Thanks again, @Master DJon,, the remove functionality is to catch the id from select checkbox now I made the rest and If I have doubt I will post, thanks

Master DJon Over a year ago

I just looked at your proposed Edit. It clearly demonstrates that you need to learn more about JavaScript. This is not to dismiss your current knowledge, but to encourage you to look by yourself before asking another question. Because I am not 100% sure of what and how you intended to do, I won't tell you "errors". You should at least check for : "scope of variables in JS", "HTML DOM element usage". Unfortunately it would not be good for you if I do all your job, not more if someone else do it. Wish you good learning & pratice !

Collectives™ on Stack Overflow

generate HTML page using DOM - Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related