0
мой вопрос основан на предыдущем вопросе generate HTML page using DOM - Javascript и основанный на этом снимке in down, I could solve the question with @MasterDJon orientation подмигнули работают очень хорошо, но подмигнули не завершена,информация Разгрузка при нажатии на кнопку с DOM - Javascript
потому, что до сих пор отсутствует создавание событие для student informaion button и как скрипты и страницы подмигнули работы, но мне нужно Unload_Student, чтобы увидеть информацию, когда же выбрать в квадрате и мне нужно вернуться на главную страницу или школьной странице когда Я нажимаю кнопка вернуться на страницу школы, Если вы не понимаете мой вопрос, попробуйте выполните код фрагмента, чтобы увидеть результат.
пс: суммируя и завершающим, я хочу просто перейти на студенческой странице, а затем вернуться на главную страницу с button event
var school = new School(1);
function Student(id) {
this.id = id;
this.div = null;
var self = this;
Unload_Student(this.id);
function Unload_Student(index) {
var div = document.createElement("div");
div.id = "student";
var h1 = document.createElement("h1");
h1.style.color = "red";
var title = document.createTextNode("Student " + index + " informations:");
h1.appendChild(title);
var h3 = document.createElement("h3");
h3.style.color = "blue";
var subtitle = document.createTextNode("List Of Books:");
h3.appendChild(subtitle);
div.appendChild(h1);
div.appendChild(h3);
var btnBack = document.createElement("button");
var btnBackText = document.createTextNode("Return to School Page");
btnBack.appendChild(btnBackText);
btnBack.onclick = function() {
//return to school page
//but it´s not function
school.Unload_School();
}
div.appendChild(btnBack);
document.body.appendChild(div);
};
}
function School(id) {
this.id = id;
this.index = 0;
this.students = {};
this.studentsList = document.createElement('DIV');
var self = this;
Unload_School();
function Unload_School() {
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.studentInformations();
}
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.studentInformations = function() {
for (var studentIndex in this.studentsList.childNodes) {
var studentInf = this.studentsList.childNodes[studentIndex];
if (studentInf.childNodes[0].checked) {
this.studentInformation(studentInf['piso-id']);
}
}
};
School.prototype.studentInformation = function(id) {
if (!this.students[id]) {
return;
}
if (this.students[id].div != null) {
//need to call the UnloadStudent
this.students[id].Unload_Student(this.students[id].id);
}
};#school {
display: inline-table;
vertical-align: middle;
text-align: left;
}
#student {
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>
вам нужно сделать, это чистой воды JavaScript ли? Можете ли вы использовать фреймворк? – whipdancer
@whipdancer, это просто в javascripts и DOM, без фреймворка, я хочу называть 'function Unload_Student (index)', когда я выбираю ученика в флажке, и если я выбираю ученика в флажке, я могу удалить, но я хочу выбрать и см. информацию с вызовом o 'function Unload_Student (index)' –
@whipdancer, я поместил эту 'функцию UnloadStdent (index)' inside 'student class', чтобы увидеть результат, но мне нужно позвонить, когда я нажимаю кнопку« Информация о студенте »и если можно вернуться на главную страницу с кнопкой «вернуться на страницу школы» –