javascript - 当我无法控制 html 时，如何向元素添加事件处理程序？

Question

我有一个带有下拉列表和链接标记的页面。

我根本无法修改页面上的 html，但我可以向页面添加 JavaScript。

当用户从下拉列表中选择不同的语言选项时，我需要能够翻译 .goButton 元素的文本。

如何单独使用 JavaScript 来完成此任务？

<a class="goButton" ... >Send</a>

<select name="ddlLanguages" id="ddlLanguages" class="form-control">
    <option value="zh-CN">Chinese (Simplified, PRC)</option>
    <option selected="selected" value="en-GB">English (United Kingdom)</option>
    <option value="en-US">English (United States)</option>
    <option value="fr-FR">French (France)</option>
    <option value="de-DE">German (Germany)</option>
    <option value="it-IT">Italian (Italy)</option>
    <option value="pt-BR">Portuguese (Brazil)</option>
    <option value="es-ES">Spanish (Spain)</option>
</select>

Answer 1

尝试这样，您可以将每种语言的文本存储在选项元素中:

document.getElementById('ddlLanguages').addEventListener('change', function (elem) {
    document.querySelector("a.goButton").innerHTML =
        this.options[this.selectedIndex].getAttribute('data-action');
});

<select name="ddlLanguages" id="ddlLanguages" class="form-control">
  <option data-action='发送' value="zh-CN">Chinese (Simplified, PRC)</option>
  <option data-action='BritishSend' elected="selected" value="en-GB">English (United Kingdom)</option>
  <option selected data-action="AmericanSend" value="en-US">English (United States)</option>
  <option data-action="Envoyer" value="fr-FR">French (France)</option>
  <option data-action="Senden" value="de-DE">German (Germany)</option>
  <option data-action="Inviare"  value="it-IT">Italian (Italy)</option>
  <option data-action="Enviar" value="pt-BR">Portuguese (Brazil)</option>
  <option data-action="Enviar" value="es-ES">Spanish (Spain)</option>

</select>
<a onclick="fillSearch()" class="goButton">AmericanSend</a>