Как сделать в инпутах текст, через js?

Question

[Елена]

Всем привет! У меня есть разметка, в которой есть текст. Через js я его меняю в инпутах. Изначально, когда еще текст не меняется в инпутах поля пустые. Как сделать, чтоб текст из разметки отображался в полях инпута изначально, который можно сразу редактировать? То-есть, когда в разметке меняю текст, то в поле инпута появляется этот текст и его можно в инпуте редактировать.
Если в разметке нет текста, то поля должны быть пустыми, где написанно: "Имя", "Фамилия"
Ссылка на код https://playcode.io/533725/
У меня получается так

А надо так

Comments

[Froggyweb]

placeholder это пример заполнения
value это значение (может быть присвоено по умолчанию)

[Евгений]

Почитайте про событие input

[Елена]

Froggyweb, как это сделать?

[Froggyweb]

добавить атрибут value

[Елена]

Froggyweb, я так и не поняла куда добавить аргумент value

[Froggyweb]

Elena0394, https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

[Елена]

Froggyweb, так аргумент value в input записывается? Получается если изменять текст в разметке, то придется и в value его менять

[Кодер Кодер]

Песочницу можно было бы и оставить. Другим ведь тоже интересно учиться)

[Елена]

Кодер Кодер, я только познакомилась с этим редактором, на тот момент, и не знала как сохранять)

Answer 1

[Анар Лятифов]

Если я вас правильно понял то вам нужно что-то такое:

<h1 class="Name preName">GGG</h1>
<p class="Family preSurname">JJJJJJJ</p>


<form class="container">
  <input type="text" name="profileName" class="newName inputName" placeholder="Имя" value="Текст">
  <input type="text" name="aboutMe" class="newFamily inputSurname" placeholder="Фамилия" value="Текст">
  <button type class="button">Сохранить</button>
</form>

и js:

//Находим элементы "вёрстки"
let name = document.querySelector(".preName")
let surname = document.querySelector(".preSurname")

//Находим инпуты
let inputName = document.querySelector(".inputName")
let inputSurname = document.querySelector(".inputSurname")

// Проверяем если элемент не пуст то его содержимое помещаем в инпут
if (name.innerHTML() !== "") {
    inputName.value = name.innerHTML();
}

// или можно записать ещё короче

inputSurname.value = (surname.innerHTML() !== "") ? surname.innerHTML() : "";

Comments

[Елена]

Нет, так не одобрят. Потому-что если изменять в верстке текст, то придется его менять в value

[Анар Лятифов]

Могли бы вы подробнее описать ситуацию, иначе помочь будет сложновато, при каких обстоятельствах текст в инпутах должен соответствовать тексту в вёрстке а при каких нет?

[Елена]

Анар Лятифов спасибо, что помогаете) Вот такая ситуация: в html разметке есть h1 с текстом. При загрузке страницы этот текст должен быть в поле инпута, причем его можно было редактировать. Если напрямую писать текст в value, то это будет не правильно т.к. при изменении текста в h1, придется менять его и в value

[Анар Лятифов]

Elena0394, Пока что не за что)) Если я вас правильно понял то вы хотите чтоб была возможность непосредственно менять H1 и уже после его изменения менялся инпут, осмелюсь предположить что в итоговой вёрстке вы планируете вообще спрятать инпут, и они вам нужны только, для сохранения введённых данных, я верно всё понял?

[Елена]

Анар Лятифов, инпут останется в верстке. В песочнице, которую скидывала, там все работает, только изначально там должен отображаться текст из h1, но он начинает отображаться только при редактировании

[Анар Лятифов]

Elena0394, Не уверен что это то что вы ищите, однако проблема в том что у вас весь код в теле функции которая выполняется только при событии "submit" на форме соответственно чтоб оно выполнялось и при загрузке странице надо её отдельно вызвать, а так как плюс ко всему надо ещё и предотвратить отправку формы если человек её сохраняет нам надо проверить существует ли "event", вообщем вот попробуйте и отпишите устраивает ли вас такое решение:

function Profile(event) {
  if(event) {event.preventDefault();}
  const profileName = document.querySelector('.container').elements.profileName;
  const aboutMe = document.querySelector('.container').elements.aboutMe;
  profileName.value = document.querySelector('.Name').textContent;
  
  document.querySelector('.Family').textContent = aboutMe.value;
  
  
}

Profile()

document.querySelector('.container').addEventListener('submit', Profile);

[Елена]

Анар Лятифов, спасибо огромное) вроде так)

[Анар Лятифов]

Elena0394, Не за что)) Успехов вам)