Как заменить один объект другим??

Question

[Michaly4]

Ребята помогите закончить..
Запутался..
Осталась последняя функция чтобы я мог редактировать любые данные и возврашать их назад отредактированными
Т.е. я ввожу данные в инпуты нажимая addUser генерирую в таблицу,если нажимаю edit возвращаю их назад в инпуты редактирую и нажимая уже edit user возвращаю назад на тот же индекс отредактироваными
но я не могу закончить функцию saveEditUser которая уже стягивает новые данные создает новый объект и мне НУЖНО КАК-ТО ПОДМЕНИТЬ ОБЪЕКТ в функции addUse т.е. данные с objNew в obj???мне тут подсказывали что по id объекта как-то это сделать но я ничего не понял((

Answer 1

[webdisigner]

5 изменений, все подписаны

let selectedRow = null;

const getS = selector => document.querySelector(selector);
const login = getS('#log');
const pass = getS('#pass');
const mail = getS('#mail');
const form = getS('.form');
const TBODY = getS('.tbody');
const inp = document.querySelectorAll('button');
const btnEdit = getS('.btn-edit');

var id = ''

let loginRegExp = /^\w{4,25}$/;
let passRegExp = /^[a-zA-Z0-9_@#&]{8,15}$/;
let mailRexExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

function setErrorFor(input) {
   if (input.className = 'input') {
      input.className = 'input error';
   }
}

function setSuccesFor(input) {

   if (input.className = 'input') {
      input.className = 'input active';
   }
}
let arr = [];


function addUser() {
   // TBODY.innerHTML = '';
   let obj = {
      id: Math.floor(Math.random() * 50) + 1,
      login: login.value,
      password: pass.value,
      email: mail.value,
   };
   arr.push(obj);
   render();
}

function render() {
   TBODY.innerHTML = '';
   arr.forEach((value, index) => {
      let newUser = `
      <tr data-id='${index}'>
      <td>${index+1}</td>
      <td>${value.login}</td>
      <td>${value.password}</td>
      <td>${value.email}</td>
      <td> <button onClick = 'onEdit(this)' id ='edit'>edit</button> </td>
      <td> <button  data-name = 'delete' data-id='${index}'  id = 'delete'>delete</button></td>
      </tr>`;
      TBODY.insertAdjacentHTML('beforeend', newUser);
   });
   console.dir(TBODY);
}

function onEdit(td) {
   let btnEdit = getS('.btn');
   console.dir(btnEdit);

   inp.forEach(element => {
      if (element.className == 'btn') {
         element.classList.add('hide')
      }
      if (element.className == 'btn-edit hide') {
         element.classList.remove('hide');
      }
   });
   selectedRow = td.parentElement.parentElement;

  id = selectedRow.cells[0].innerHTML

  
   login.value = selectedRow.cells[1].innerHTML;
   pass.value = selectedRow.cells[2].innerHTML;
   mail.value = selectedRow.cells[3].innerHTML;
   td.className = 'input active';
   console.dir(selectedRow);
}

function saveEditUser() {
  let objNew = {

      login: login.value,
      password: pass.value,
      email: mail.value,
   };

  arr.splice(id-1, 1, objNew);
  render();
  
  getS('.btn-edit').classList.add('hide')
  getS('.btn').classList.remove('hide')

}

btnEdit.addEventListener('click', (event) => {
   saveEditUser();
   form.reset();
});



TBODY.addEventListener('click', function name(event) {
   event.stopPropagation();
   console.log(event.target.dataset);
   if (event.target.dataset.name == "delete") {
      arr.splice(event.target.dataset.id, 1);
      render();
   }
});

login.oninput = function firstNameCheck() {
   let testlogin = loginRegExp.test(this.value);
   if (testlogin) {
      setSuccesFor(login);
    
   } else {
      setErrorFor(login);
   }
};
pass.oninput = function firstNameCheck() {
   let testPass = passRegExp.test(this.value);
   if (testPass) {
      setSuccesFor(pass);
     
   } else {
      setErrorFor(pass);
   }
};
mail.oninput = function firstNameCheck() {
   let maillogin = mailRexExp.test(this.value);
   if (maillogin) {
      setSuccesFor(mail);
      
   } else {
      setErrorFor(mail);
   }
};

form.addEventListener('submit', function name(event) {
   event.preventDefault();
   if(getS('.btn').classList=='btn') addUser(); // ИЗМЕНЕНИЕ НОМЕР 6
   else{saveEditUser()} // ИЗМЕНЕНИНЕ НОМЕР 7
   form.reset();
   login.className = 'input';
   pass.className = 'input';
   mail.className = 'input';
});

Comments

[Michaly4]

спасибо,но к сожалению не всё так именно нужно (
подменна идёт только последнего индекса в массиве,а я хочу редактировать любой елемент в массив и возвращать объект новый именно туда где был старый

[webdisigner]

Michaly4, попробуй щас, отредактировал ответ

[webdisigner]

Michaly4, ты скрываешь кнопку addUser когда хочешь отредактировать какого то пользователя, но фокус остается и нажимая enter код не редачит а создает нового пользователя
а "изменение 6 и 7" проверяют что именно ты сейчас делаешь редачишь или создаешь пользователя

[Michaly4]

webdisigner, блин СПАСИБО ТЕБЕ БОЛЬШОЕ именно то что надо, жаль что где-то я сам так и не дошёл до этого...тяжеловато мне даётся JS, но по крайней мере в другой раз я уже буду где-то что-то знать в подобных заданиях)

[webdisigner]

Michaly4, но у тебя хорошая мини программа получилась, главное делать ошибки, ты молодец

[Michaly4]

webdisigner, спасибо она к сожелению не полностью моя с пощью твоей и гугла,но буду дальше стараться,спасибо еще раз