1

Помогите модернизировать код таким образом, чтобы каждый добавленный через форму студент был объектом, сохранялся в массив объектов (студентов) и после выводился в таблицу HTML

var data = [];
function createObj(firstName,secondName,middleName,birthday,year,faculty){
  return {
    firstname: firstName,
    secondName: secondName,
    middleName: middleName,
    birthday: birthday,
    year: year,
    faculty: faculty
  }
}
function writeName(){
    var name = document.getElementById('name').value;
    var last = document.getElementById('last').value;
    var middle = document.getElementById('middle').value;
    var birthday = document.getElementById('birthday').value;
    var year = document.getElementById('year').value;
    var faculty = document.getElementById('faculty').value;
    // var action = document.getElementById('action');
  if(name ===''){
    document.getElementById('errorFirstname').innerHTML = 'Имя не введено'
  } 
  if(last === ''){
    document.getElementById('errorLastname').innerHTML = 'Фамилия не введена'
  }
  if(middle === ''){
    document.getElementById('errorMiddlename').innerHTML = 'Отчество не введено'
  }
  if(birthday === ''){
    document.getElementById('errorBirthday').innerHTML = 'Дата рождения не введена'
  }
  if(year === ''){
    document.getElementById('errorYear').innerHTML = 'Год начала обучения не введён'
  }
  if(faculty === ''){
    document.getElementById('errorFaculty').innerHTML = 'Факультет не введён'
  }
  if(name!='' && last!='' && middle!='' && birthday!='' && year!='' && faculty!=''){  
    clearErrors()
    var newPerson = createObj(name,last,middle,birthday,year,faculty)
    data.push(newPerson)
    var fullName = "Полное имя:"+ last +" "+ name +" "+ middle
    // var information = fullName +", Address:"+ address +", Phonenumber:"+ phone
    appendValues(name,last,middle,birthday,year,faculty)
  }
}
function appendValues(name,last,middle,birthday,year,faculty){
  var tableRow = document.createElement("tr");
  var nameCell = document.createElement("td")
  var lastCell = document.createElement("td")
  var middleCell = document.createElement("td")
  var birthdayCell = document.createElement("td")
  var yearCell = document.createElement("td")
  var facultyCell = document.createElement("td")
  var actionCell = document.createElement("td")
  var actionButton = document.createElement("button")
  var nameTextnode = document.createTextNode(name)
  var lastTextnode = document.createTextNode(last)
  var middleTextnode = document.createTextNode(middle)
  var birthdayTextnode = document.createTextNode(birthday)
  var yearTextnode = document.createTextNode(year)
  var facultyTextnode = document.createTextNode(faculty)
  var actionTextnode = document.createTextNode('Delete')
  nameCell.appendChild(nameTextnode);
  tableRow.appendChild(nameCell)
  lastCell.appendChild(lastTextnode);
  tableRow.appendChild(lastCell)
  middleCell.appendChild(middleTextnode);
  tableRow.appendChild(middleCell)
  birthdayCell.appendChild(birthdayTextnode);
  tableRow.appendChild(birthdayCell)
  yearCell.appendChild(yearTextnode);
  tableRow.appendChild(yearCell)
  facultyCell.appendChild(facultyTextnode)
  tableRow.appendChild(facultyCell)
   actionButton.onclick = function () {
    myDelete(this);
  };
  actionButton.appendChild(actionTextnode);
  actionCell.appendChild(actionButton)
  tableRow.appendChild(actionCell)
  document.getElementById('table').appendChild(tableRow)
}
function myDelete(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("table").deleteRow(i);
}
function clearText(){
  document.getElementById('name').value=""
  document.getElementById('last').value=""
  document.getElementById('middle').value=""
  document.getElementById('birthday').value=""
  document.getElementById('year').value=""
  document.getElementById('faculty').value=""
}
function clearErrors(){
    document.getElementById('errorFirstname').innerHTML = ''
    document.getElementById('errorLastname').innerHTML = ''
    document.getElementById('errorMiddlename').innerHTML = ''
    document.getElementById('errorBirthday').innerHTML = ''
    document.getElementById('errorYear').innerHTML = ''
    document.getElementById('errorFaculty').innerHTML = ''
}
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

 
    <article>
        <div class="container">
            <form style="margin-bottom: 15px;">
                <div class="form-group">
                    <label for="name">Имя</label>
                    <input required class="form-control" type="text" id="name" />
                    <label for="last">Фамилия</label>
                    <input required class="form-control" type="text" id="last"/>
                    <label for="middle">Отчетсво</label>
                    <input required class="form-control" type="text" id="middle"/>
                    <label for="birthday">Дата рождения</label>
                    <input required class="form-control" type="date" id="birthday"/>
                    <label for="year">Год начала обучения</label>
                    <input required class="form-control" type="text" id="year"/>
                    <label for="faculty">Факультет</label>
                    <input required class="form-control" type="text" id="faculty"/>
                </div>

                <input type="button" class="btn btn-primary" value="Добавить студента" onclick="writeName();" />
                <input type="button" class="btn btn-success" value="Очистить" onclick="clearText();" />

            </form>
        </div>
    </article>
    <div>
        <table id="table" class="table" style="border: 1px solid black;">
            <thead>
                <tr>
                    <th scope="col">Имя</th>
                    <th scope="col">Фамилия</th>
                    <th scope="col">Отчетсво</th>
                    <th scope="col">Дата рождения</th>
                    <th scope="col">Год начала обучения</th>
                    <th scope="col">Факультет</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                
                </tr>
            </tbody>
        </table>
    <span id="errorFirstname"></span>
    <span id="errorLastname"></span>
    <span id="errorMiddlename"></span>
    <span id="errorBirthday"></span>
    <span id="errorYear"></span>
    <span id="errorFaculty"></span>
    </div>

2

1 ответ 1

1

Единственная причина, по которой ничего не получается - потому что срабатывает одна из валидаций и не пропускает код дальше.


Советую научиться отлаживать код и не тревожить каждый раз такими вопросами других..

Как и какими средствами находить ошибки в Javascript коде? Отладка (Debugging)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.