I have a "div" that brings the data from a table "Mysql", how do I click the "div" to make the data editable? But without going to another page.
<div id="nome_mysql">João</div>By clicking on John, the "div" would become an "input text", where I could change the name to another, and after making the change, the "input text" would return to be a normal "div"?
When you say "when you click on this div, the data becomes editable" it is best to have a% hidden_default that appears when you click the div. So the value you edit is always on the page, even though input is hidden.
Example:
var div = document.getElementById('nome_mysql');
var input = document.querySelector('input[nome="nome_mysql"]');
console.log(div, input)
function toggleElements(show, hide) {
show.style.display = 'block';
hide.style.display = 'none';
show.focus();
}
div.addEventListener('click', function() {
input.value = this.innerText;
toggleElements(input, this);
});
input.addEventListener('blur', function() {
div.innerText = this.value;
toggleElements(div, this);
});input[nome="nome_mysql"] {
display: none;
}<div id="nome_mysql">João</div>
<input type="text" nome="nome_mysql" />