( UPDATED: See last section. )
(（更新：请参阅最后一节。）)
One way of doing this, is to create an object which maps english words to greek words, and then add an eventlistener that catches the double click event on the table element, checks if the 'click to translate' element has been clicked and do the translation:
(一种方法是创建一个将英语单词映射到希腊语单词的对象，然后添加一个事件侦听器，该事件侦听器捕获table元素上的双击事件，检查是否已单击“ click to translation”元素并执行翻译：)
const dict = { if: "αν", than: "απ?", else: "αλλι??" } document.querySelector("table").addEventListener("dblclick", function(e){ // Check if the .changeable element has triggered the click event if ( e.target.classList.contains("changeable")){ // Get the text content from the sibling element which contains the english word const word = e.target.previousElementSibling.textContent; // Check if we have the word in our dictionary if ( dict[word] ){ // Change the text content of the 'click to translate' element with the greek word e.target.textContent = dict[word]; } } });
table { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
<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>
Updated
(更新)
Notes: As @Jhecht correcly pointed out, the querySelectorAll returns a NodeList that needs to be iterated.
(注意：正如@Jhecht正确指出的那样，querySelectorAll返回需要迭代的NodeList。)
The easiest way to do that, is through the forEach method available to the NodeList object.(最简单的方法是通过NodeList对象可用的forEach方法。)
The code would be written like this:(该代码将这样写：)
document.querySelectorAll(".changeable").forEach(function(element){
element.addEventListener( "dblclick", function(){ /* CODE HERE */ } );
});
If you see trying to attach multiple event listeners to a web page, you should reconsider your choice and instead attach a single event listener on a parent object which will be receiving all the events of its inner children.
(如果看到尝试将多个事件侦听器附加到网页，则应重新考虑选择，而将单个事件侦听器附加到将接收其内部子事件的所有事件的父对象上。)
I applied this pattern in my solution.(我在解决方案中应用了这种模式。)
Since the question has been updated, and the intentions are more clear, I am adding another code that enables the user to double click on the Click to translate area and allow them to enter a custom value:
(由于问题已经更新，并且目的更加明确，因此我添加了另一个代码，该代码使用户可以双击“ Click to translate区域并允许他们输入自定义值：)
document.querySelector("table").addEventListener("dblclick", function(e){ if ( e.target.classList.contains("changeable")){ e.target.setAttribute("contenteditable", true); if ( e.target.textContent === "Click to translate" ){ e.target.textContent = ""; e.target.focus(); } } });
<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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
