Редактирование содержимого для </h1> </div> <div class="question-subheader"> <a href="https://ru.stackoverflow.com/u/416980" class="question-author" target="_blank"> Автор вопроса: Chilik </a> </div> <div class="question-text"> <p><a href="https://i.stack.imgur.com/xMHW1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xMHW1.png" alt="введите сюда описание изображения" /></a></p> <p>Есть такая форма. И есть данные к ней.</p> <pre><code>const data = { title: 'This is my title', shortDescr: 'This is my shortDescr', text: 'This is my text', } </code></pre> <ol> <li>нужно, чтобы внутри полей ввода были соответствующие значения из объекта Data</li> <li>должна быть возможность редактировать текст этих полей</li> </ol> <p>placeholder здесь не подойдет, тк его текст нельзя будет отредактировать</p> <br> </div> <div class="question-source"> <a href="https://ru.stackoverflow.com/q/1257091" target="_blank" class="source-link">Источник</a> </div> <div class="after"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-7213297900893379" data-ad-slot="7637638360"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="answers"> <h3 class="answers-title"> Ответы <span>(1 шт):</span> </h3> <div class="answers-list"> <div class="answers-item" id="answer-1"> <a href="https://ru.stackoverflow.com/u/271337" target="_blank" class="answer-author">Автор решения: Bamberg</a> <div class="answer-content"><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = { title: 'This is my title', desc: 'This is my shortDescr', text: 'This is my text' } window.onload = function() { for (let name in data) { let field = document.querySelector(`[name=${name}]`); if (field) field.value = data[name]; } let mutableFields = document.querySelectorAll('.mutable'); mutableFields.forEach(field => { field.addEventListener('input', updateData); }); function updateData(event) { let target = event.target; if (data.hasOwnProperty(target.name)) { data[target.name] = target.value; } console.info(data); } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><input name="title" type="text" class="mutable"> <input name="desc" type="text" class="mutable"> <textarea name="text" class="mutable"></textarea></code></pre> </div> </div> </p> </div> <a href="#answer-1" class="answer-link">→ Ссылка</a> </div> </div> </div> <div class="answers-vk">  <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v18.0&appId=2623658001082461" nonce="x6mCrB0v"></script> <div class="fb-comments" data-href="https://huslhub.com" data-width="850" data-numposts="5"></div> </div> </div> </div> </div> </div> <div class="footer-outer"> <div class="container"> <div class="footer"> <p> <span>licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank" rel="nofollow">cc by-sa 3.0</a> with attribution. </span> </p> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-61W54EQCFG"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-61W54EQCFG'); </script>    </body> </html>