I have a two columned HTML table which I want to translate from English to Greek.
I desire to do that by double-clicking the Click to translate placeholder under the Greek column and then being prompted there, to insert a Greek text instead it.
In other words, I would interact with the HTML file to translate where the placeholder, right from web browser; the changes will automatically get saved in the HTML file.
table, th, td {
border: 1px solid black;
}<!DOCTYPE html><html><body><section class="allEnglishSections"><h2>Conditioning</h2><table><tr><th>English</th><th>Greek</th></tr><tr><td>if</td><td class="changeable">Click to translate</td></tr><tr><td>than</td><td class="changeable">Click to translate</td></tr><tr><td>else</td><td class="changeable">Click to translate</td></tr></table></section><script></script></body></html>From searching data on how to achieve this, I understand I should use something similar to this pseudocode:
document.querySelectorAll(".changeable").addEventListener(ondblclick, function() {
myTranslation = prompt();
document.querySelector(".changeable").value = myTranslation;
}
But it is unclear to me how to actually selecting all text of a cell by double clicking it, and then changing it directly from web browser in such a way that the HTML file would change.
Is this even possible with latest ECMAScript and if so how will you achieve this?