Javascript help | Rename paragraph

Question

Ola would like to know the following, as I would logica to rename a paragraph directly by html, for example. I have an empty paragraph, the user clicks on the paragraph and type a word from enter and the word arrow its value in the paragraph. A system of renaming.

Answer 1

Keep in mind that user entries are provided by the element input. Starting from this principle we can follow the steps below:

1. Create the element input when the user clicks on the paragraph.
2. Get the value of input when the user presses the key enter.
3. Insert the figure obtained in the paragraph

document.getElementById("editavel").addEventListener("click", editar);

function editar() {
  const paragraph = this;

  //Criando o input
  const input = document.createElement("input");
  input.id = "input-text";
  input.type = "text";
  input.value = paragraph.innerText;

  //Substituindo o parágrafo pelo input recém criado
  paragraph.parentNode.replaceChild(input, paragraph);
  
  //Focando no elemento criado para melhorar experiência do usuário
  input.focus();
  
  //Identificando a tecla enter para salvar o texto digitado
  input.addEventListener("keypress", function(event) {
    const key = event.which || event.keyCode;
    if (key === 13) {
      saveText();
    }
  });
};

function saveText() {
  const input = document.getElementById("input-text");

  //Criando o novo parágrafo
  const newParagraph = document.createElement("p");
  newParagraph.id = "editavel";
  newParagraph.innerText = input.value;

  //Substituindo o input pelo parágrafo
  input.parentNode.replaceChild(newParagraph, input);

  //Adicionando o evento de click no novo elemento
  newParagraph.addEventListener("click", editar);
};

* {
  margin: 5px;
  padding: 5px;
}

p {
  width: 70%;
  height: 30px;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  border: 1px solid black;
}

input {
  width: 70%;
  height: 30px;
  background-color: #f4f4f4;
  border: none;
}

<div>
  <p id="editavel"></p>
</div>