How to add an event handler to an element when I have no control over the html?

Question

I have a page with a dropdown list and a link tag.

I am unable to modify the html on the page at all but I can add javascript to the page.

I need to be able to translate the text of the .goButton element when a user selects a different language option from a dropdown list.

How can I accomplish this with javascript alone?

<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>

you want to change language? from english - send to `French` something like that? — Guruprasad J Rao, Sep 18 '15 at 12:48
exactly, i want to change the traduction of "Send" in the link simply using javascript — sbouaked, Sep 18 '15 at 12:49
`document.querySelector("a.goButton").innerHTML="Something Else";` ? — ddavison, Sep 18 '15 at 12:50
To make this simpler I would recommend Angular.js or jQuery. It's what they are built for — cjds, Sep 18 '15 at 12:50
[Document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). — Sverri M. Olsen, Sep 18 '15 at 12:50
possible duplicate of [How to Get Element By Class in JavaScript?](http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript) — Gustavo Straube, Sep 18 '15 at 12:51
@cjds Really? jquery or angular to set the `textContent` of a node???? Angular is complete overkill, jQuery is still overkill — Ruan Mendes, Sep 18 '15 at 12:53
@cjds Eh, Angular was not made for this! jQuery *was* made for stuff like this, but it is a little over-kill in this situation... — Sverri M. Olsen, Sep 18 '15 at 12:53

score 3 · Answer 1 · edited Sep 18 '15 at 13:14

Try it this way, you can store the text for each language in the option element:

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>

@JuanMendes, for that he need to maintain reference with the value selected, He has not provided it anywhere in his question.. — Rayon, Sep 18 '15 at 12:58
@JuanMendes, I have updated my answer. Thanks for the efforts ! — Rayon, Sep 18 '15 at 13:10

jessegavin · Accepted Answer · 2015-09-18T13:11:41.257

2

If you're trying to translate that button

JAVASCRIPT

function changeLanguage(e) {
  var lang = e.target.options[e.target.selectedIndex].value;

  var textMap = {
    "en-US" : "send",
    "en-GB" : "send",
    "fr-FR" : "envoyer",
    "zh-CN" : "发送",
    "de-DE" : "senden",
    "de-DE" : "senden",
    "it-IT" : "inviare",
    "pt-BR" : "mandar",
    "es-ES" : "enviar"
  };


  if (lang && textMap[lang]) {
    document.querySelector(".goButton").innerText = textMap[lang];
  }
}

document.getElementById("ddlLanguages").addEventListener("change", changeLanguage);

HTML

<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>

DEMO HERE

edited Sep 18 '15 at 13:11

answered Sep 18 '15 at 12:52

jessegavin

74,067
28
136
164

this is exactly what I want to do, but (and I m sorry, i forgot to explain) I can't edit the HTML, i can just add some JS, so i can't add the onchange value to use your function. – sbouaked Sep 18 '15 at 13:01
2

@sbouaked You can register a change handler from JavaScript instead of through the HTML attribute – Ruan Mendes Sep 18 '15 at 13:07
2

Consider using http://stackoverflow.com/a/32652589/227299 to store the language in each of the options instead of requiring a map where the property names have to match up with the text encoding – Ruan Mendes Sep 18 '15 at 13:16
@JuanMendes That was actually going to be the next thing I was going to recommend, but you beat me to it. – jessegavin Sep 18 '15 at 13:21
@JuanMendes i'm agree but in this case I have no control over the html ;) – sbouaked Sep 18 '15 at 18:02

score 1 · Answer 3 · answered Sep 18 '15 at 12:51

1

var a = document.querySelector('.goButton');
a.textContent = 'Changed';

answered Sep 18 '15 at 12:51

Lee

2,993
3
21
27

cjds · Answer 4 · 2015-09-18T13:33:52.837

1

Use a query selector

document.querySelector(".goButton").innerHTML="Send 2";

This queries the elements based on CSS selectors

Documentation

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

edited Sep 18 '15 at 13:33

answered Sep 18 '15 at 12:52

cjds

8,268
10
49
84

querySelectorAll returns a NodeList – Lee Sep 18 '15 at 13:08

How to add an event handler to an element when I have no control over the html?

4 Answers4