Généralise l'usage du champs text

public/parametres.html

@@ -19,13 +19,13 @@
 
     <section>
       <p>
-      Je m'appelle <input type="text" name="name" id="name" value="Henri">
+      Je m'appelle <input type="text" name="name" id="name" value="Henri" class="nfl-textfield">
       et le titre de ce sondage
       <select id="type_sondage">
         <option>classique</option>
         <option>special dates</option>
       </select>
-      est <input type="text" name="titre">.
+      est «&nbsp;<input type="text" id="title" name="title" value="Repas des amies" class="nfl-textfield">&nbsp;».
       </p>
       <p>
       Si je devais le décrire pour les autres personnes, je dirais

public/script.js

@@ -10,11 +10,22 @@ const debugStorage = () => {
   }
 }
 
-$("#name").outerHTML = `<span id="name" class="toggle-field">${$("#name").getAttribute('value')}</span>`;
+const useTextInsteadOfInputFor = (textField) => {
+  let $name = $(`#${textField.name}`);
+  $name.outerHTML = `<span id="${textField.name}" class="toggle-field">${$name.getAttribute('value')}</span>`;
+  return textField;
+}
 
-$("#name").addEventListener("click", (e) => {
+const createUpdateModalOnClickFor = (textField) => {
-  e.preventDefault();
+  let $name = $(`#${textField.name}`);
-  createModal(`<input type="text" name="name" id="nameUpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="name">></button>`);
+  $name.addEventListener("click", (e) => {
+    e.preventDefault();
+    createModal(`<input type="text" name="${textField.name}" id="${textField.name}UpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="${textField.name}">></button>`);
+  });
+}
+
+$$(".nfl-textfield").forEach((textField) => {
+  createUpdateModalOnClickFor(useTextInsteadOfInputFor(textField));
 });
 
 const removeOverlay = () => {
@@ -35,8 +46,8 @@ const createModal = (text) => {
   overlay.addEventListener('click', removeOverlay)
   $('body').insertBefore(overlay, $('main'))
 
-  $("#submitTextField").addEventListener("click", () => {
+  $("#submitTextField").addEventListener("click", (e) => {
-    $("#name").innerHTML = $("#nameUpdateField").value
+    $(`#${e.target.dataset.reference}`).innerHTML = $(`#${e.target.dataset.reference}UpdateField`).value
     removeOverlay()
   });
 }