Помогите со скриптами

Question

Помогите вывести информацыю с полей label в поле txtResult с помощью функции setValueById Вот код:

function getValueById(id) {
  return document.getElementById(id).value;
}

function setValueById(id, value, append = false) {
  //let element = document.getElementById(id);
  //element.value = append
  //? element.value + value
  //: value;
  let firstName = document.getElementById(id);
  firstName.value = append ?
    firstName.value + value :
    value;
}

function btnSubmitOnClick() {
  let firstName = getValueById('txtFirstName');
  let yearOfBirth = getValueById('txtYearOfBirth');
  let currentYear = new Date().getFullYear();
  if (yearOfBirth > currentYear) {
    alert('Year Of Birth can’t be more than current year');
  }
  let lastName = getValueById('txtLastName');
  let Email = getValueById('txtEmail');
  if (lastName == false) {
    alert('The <parameter label> is required.');
  }
  if (Email == false) {
    alert('The <parameter label> is required.');
  }
  if (firstName == false) {
    alert('The <parameter label> is required.');
  }
  if (yearOfBirth == false) {
    alert('The <parameter label> is required.');
  }
}

.container {
  float: left;
}

.row {
  margin-top: 10px;
  clear: both;
  text-align: right;
}

.row label {
  float: left;
}

.row>input {
  margin-left: 10px;
}

<div class="container">
  <div class="row">
    <label>First Name: </label><input id="txtFirstName" />
  </div>
  <div class="row">
    <label>Last Name: </label><input id="txtLastName" />
  </div>
  <div class="row"><label>Email: </label><input id="txtEmail" />
  </div>
  <div class="row"><label>Year Of Birth:</label><input id="txtYearOfBirth" />
  </div>
  <div class="row">
    <input id="btnSubmit" type="button" value="Submit" onclick="btnSubmitOnClick();" />
  </div>
  <div class="row">
    <textarea id="txtResult" cols="35" rows="45"></textarea>
  </div>
</div>

Answer 1

Непонятно зачем вы используете отдельные функции.

Я бы вашу задачу оформил бы так: (комментарии к коду прилагаются)

let result = document.querySelector('#txtResult'); // Храним в переменной textarea, куда будем записывать данные

function btnSubmitOnClick() {
  let firstName = document.querySelector('#txtFirstName').value, // получаем значение инпута First Name
      // Далее аналогично
      lastName = document.querySelector('#txtLastName').value,
      email = document.querySelector('#txtEmail').value,
      yearOfBirth = document.querySelector('#txtYearOfBirth').value,
      data = []; // В массив будем передавать значения
  
  result.value = ''; // Очищаем textarea
  
  if(firstName.length > 0) { // Если First Name заполнен, то..
    data.push(firstName); // .. записываем значение в массив
  } else alert('The "First Name" is required.'); // .. если нет, то выводим ошибку
  
  // Далее аналогично с остальными инпутами
  
  if(lastName.length > 0) {
    data.push(lastName);
  } else alert('The "Last Name" is required.');
  
  if(email.length > 0) {
    data.push(email);
  } else alert('The "Email" is required.');
  
  // С "Годом рождения" чуть другая проверка
  if(yearOfBirth.length === 4 // Нужно чтобы было 4 цифры
  && +yearOfBirth < new Date().getFullYear()) { // И конвертируем строку в число и сверяем, чтобы это значение было меньше текущего года
    data.push(yearOfBirth); // А дальше аналогично - записываем в массив
  } else alert('Year Of Birth can’t be more than current year');
  
  // Если что-то не пройдёт проверку, то оно не запишется в массив, т.е. массив может быть пустым.
  if(data.length > 0) // Но если он не пустой, то ..
    result.value = data.join('\n'); // .. эти значения мы запишем в textarea. Каждое значение с новой строки. ("\n" замените на ", ", чтобы вывести через запятую, например)
  else return false;
}

.container {
  float: left;
}

.row {
  margin-top: 10px;
  clear: both;
  text-align: right;
}

.row label {
  float: left;
}

.row>input {
  margin-left: 10px;
}

<div class="container">
  <div class="row">
    <label>First Name: </label>
    <input id="txtFirstName"/>
  </div>
  <div class="row">
    <label>Last Name: </label>
    <input id="txtLastName"/>
  </div>
  <div class="row">
    <label>Email: </label>
    <input id="txtEmail"/>
  </div>
  <div class="row">
    <label>Year Of Birth: </label>
    <input id="txtYearOfBirth"/>
  </div>
  <div class="row">
    <input id="btnSubmit" type="button" value="Submit" onclick="btnSubmitOnClick();"/>
  </div>
  <div class="row">
    <textarea id="txtResult" cols="35" rows="5"></textarea>
  </div>
</div>

БЛОГ НА HUSL

Помогите со скриптами

Ответы (1 шт):