hw11_06_personForm.html 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <head>person Form</head>
  2. <body>
  3. <script>
  4. const personForm = (domEl, obj) => {
  5. const nameInput = document.createElement('input');
  6. const surNameInput = document.createElement('input');
  7. const fatherNameInput = document.createElement('input');
  8. const ageInput = document.createElement('input');
  9. const fullNameInput = document.createElement('input');
  10. domEl.append(nameInput);
  11. nameInput.value = obj.getName();
  12. domEl.append(surNameInput);
  13. surNameInput.value = obj.getSurName();
  14. domEl.append(fatherNameInput);
  15. fatherNameInput.value = obj.getFatherName();
  16. domEl.append(fullNameInput);
  17. fullNameInput.value = obj.getFullName();
  18. domEl.append(ageInput);
  19. ageInput.value = obj.getAge();
  20. nameInput.oninput = () => {
  21. obj.setName(nameInput.value);
  22. fullNameInput.value = obj.getFullName();
  23. }
  24. surNameInput.oninput = () => {
  25. obj.setSurName(surNameInput.value);
  26. fullNameInput.value = obj.getFullName();
  27. }
  28. fatherNameInput.oninput = () => {
  29. obj.setFatherName(fatherNameInput.value);
  30. fullNameInput.value = obj.getFullName();
  31. }
  32. ageInput.oninput = () => obj.setAge(ageInput.value);
  33. fullNameInput.oninput = () => {
  34. obj.setFullName(fullNameInput.value);
  35. nameInput.value = obj.getName();
  36. surNameInput.value = obj.getSurName();
  37. fatherNameInput.value = obj.getFatherName();
  38. }
  39. }
  40. const isUpperCase = (str) => str.toUpperCase() == str;
  41. let createPersonClosure = function (name, surName) {
  42. let result = {};
  43. let age = 17;
  44. let fatherName = "Пупкович";
  45. result.getName = () => name;
  46. result.getSurName = () => surName;
  47. result.getFullName = function () {
  48. return `${result.getName()} ${result.getFatherName()} ${result.getSurName()} `;
  49. }
  50. result.setFullName = (newFullName) => {
  51. const arrFullName = newFullName.split(' ');
  52. result.setFatherName(arrFullName[1]);
  53. result.setSurName(arrFullName[2]);
  54. result.setName(arrFullName[0]);
  55. }
  56. result.setName = (newName) => {
  57. if (isUpperCase(newName[0])) {
  58. name = newName;
  59. }
  60. else
  61. alert("wrong Name format");
  62. }
  63. result.setSurName = (newSurName) => {
  64. if (isUpperCase(newSurName[0])) {
  65. surName = newSurName;
  66. }
  67. else
  68. alert("wrong Surname format");
  69. }
  70. result.setFatherName = (newFatherName) => {
  71. if (isUpperCase(newFatherName[0])) {
  72. fatherName = newFatherName;
  73. }
  74. else
  75. alert("wrong Fathername format");
  76. }
  77. result.getAge = () => age;
  78. result.setAge = (newAge) => {
  79. if (newAge >= 0 && newAge <= 100)
  80. age = newAge;
  81. else
  82. alert("wrong age: " + newAge);
  83. }
  84. result.getFatherName = () => fatherName;
  85. return result;
  86. }
  87. const person = createPersonClosure("Анна", "Иванова");
  88. personForm(document.body, person);
  89. </script>
  90. </body>