Pisze programik, który generuje mi stronę z etykietami i jakimś tekstem do nich.
Chcę żeby po wygenerowaniu strony, była możliwość edycji tekstu przy etykietach.
Poproszę o podpowiedź czy dobrze do tego problemu podchodzę.
<!DOCUMENT html>
<html>
<head>
<script>
function save(eid) {
var input_value = document.getElementById(eid+'Data').value;
document.getElementById(eid+'Edited').style.display = "none";
document.getElementById(eid).style.display = "inline-flex";
document.getElementById(eid).innerHTML = input_value;
}
function edit(eid){
document.getElementById(eid).style.display = "none";
document.getElementById(eid+'Edited').style.display = "inline-flex";
document.getElementById(eid+'Edited').innerHTML =
"<form style='height: 0px;'><input id='"+eid+"Data' type='text' style='height: 19px; border: 0px;background-color: lightblue;'></form><div onclick=save('"+eid+"') style='height: 0px;border: 0px; background-color: white;'>☑</div>";
}
</script>
</head>
<body>
<div style="display: inline-flex"><b>Imię:</b></div>
<div id="labelAndGeneratedTekst" onclick="edit(this.id)" style="display: inline-flex">jakis tekst</div>
<div id="labelAndGeneratedTekstEdited" style="display: none;"></div>
<br>
<div style="display: inline-flex"><b>Płeć:</b></div>
<div id="labelAndGeneratedTekst2" onclick="edit(this.id)" style="display: inline-flex">jakis tekst</div>
<div id="labelAndGeneratedTekst2Edited" style="display: none;"></div>
<div style="display: inline-flex"><b>Zawód:</b></div>
<div id="labelAndGenerated3Tekst" onclick="edit(this.id)" style="display: inline-flex">jakis tekst</div>
<div id="labelAndGenerated3TekstEdited" style="display: none;"></div>
</body>
</html>