Есть задача сделать ссылку рядом с которой будет стоять кнопка, которая в зависимости от нажатия будет становиться либо кнопкой редактирования (и при этом значение ссылки можно изменить), либо кнопкой сохранения (значение ссылки сохраняется)
У меня есть мысль о том, как это реализовать, а именно:
Сделать блок ссылки и блок input type="text", один из которых будет скрываться и появляться в зависимости от ситуации
Например, изначально будет показана ссылка, при клике на кнопку редактирования, блок с ссылкой будет скрываться и появляется инпут. Его значения редактируется и при нажатии на кнопку редактирования/cохранения скрывается инпут и его значение передаётся в ссылку, и так много раз
Есть ли вариант реализовать это лучше и проще? Кроме этого никакие варианты в голову не лезут, да и этот не особо понятно, как правильнее всего реализовывать.
Там обязательно должен стоять инпут и обязательно должна быть ссылка.
И не совсем понятно, как поменять значения кнопки редактирования/сохранения, она должна быть единой
все правильно, ссылка, исчезающий инпут и кнопка.
С кнопкой поступают так: Инициализируют состояние (так как тут только два состояния, то подойдет булева переменная btnState) и в обработчике по клику на кнопку выполняют нужное действие:
if (btnState) {
// показываем инпут, заменяем текст кнопки на "сохранить"
} else {
//прячем инпут, заменяем у ссылки href, показываем ссылку
};
btnState = !btnState; // (инвертируем состояние кнопки)