HTML을 제어 할 수 없을 때 요소에 이벤트 핸들러를 추가하는 방법은 무엇입니까?

sbouaked

드롭 다운 목록과 링크 태그가있는 페이지가 있습니다.

페이지의 html을 전혀 수정할 수 없지만 페이지에 javascript를 추가 할 수 있습니다.

.goButton사용자가 드롭 다운 목록에서 다른 언어 옵션을 선택할 때 요소 의 텍스트를 번역 할 수 있어야 합니다.

자바 스크립트만으로 어떻게이 작업을 수행 할 수 있습니까?

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

해당 버튼을 번역하려는 경우

자바 스크립트

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>

여기 데모

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

이벤트에 DOM 요소를 생성 한 다음 DOM 요소가 존재할 때까지 이벤트 핸들러가 트리거되는 것을 방지하는 방법은 무엇입니까?

분류에서Dev

DOM Ready를위한 이벤트 핸들러를 추가 할 때 너무 늦을 수는 없나요?

분류에서Dev

Android의 Firebase-필요할 때 데이터 검색을위한 이벤트 핸들러를 실행하는 방법은 무엇입니까?

분류에서Dev

HTML에서 JSX와 같은 방식으로 이벤트 핸들러를 추가 할 수없는 이유는 무엇입니까?

분류에서Dev

"이벤트 핸들러에서 데이터베이스에 변경 사항을 저장할 수 없음"을 해결하는 방법은 무엇입니까?

분류에서Dev

fullCalendar에 이벤트를 동적으로 추가 할 때 eventClick을 사용하는 방법은 무엇입니까?

분류에서Dev

사용자가 SwiftUI에서 길게 누르기 제스처를 중지 할 때 이벤트 핸들러를 실행하는 방법은 무엇입니까?

분류에서Dev

숫자를 텍스트로 변환 할 때 추가 "수백"을 제거하는 방법은 무엇입니까?

분류에서Dev

양식을 제출할 때 URL 데이터 (변수)를 추가하는 방법은 무엇입니까?

분류에서Dev

사용자가 텔레 그램 봇에 유효한 응답을 할 때까지 함수와 핸들러를 반복하는 방법은 무엇입니까?

분류에서Dev

각도에서 지시문을 사용할 때 자식 요소에 이벤트를 첨부하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

배열을 정의 할 때 초기화하는 경우 배열에 여러 요소를 제자리에 할당 할 수없는 이유는 무엇입니까?

분류에서Dev

VB6에서 핸들 (이벤트 핸들러가 아님)을 만드는 방법은 무엇입니까?

분류에서Dev

Varnish에 사이트를 추가 할 때 반복 sed 명령을 피하는 방법은 무엇입니까?

분류에서Dev

Aframe 구성 요소는 이벤트 핸들러에서 el을 참조 할 수 없습니다.

분류에서Dev

비디오 재생을 시작할 때 videojs에 이벤트 리스너를 추가하는 방법은 무엇입니까?

분류에서Dev

Windows 7에서 Firefox가 소리를 재생할 때 VLC 미디어 볼륨 제한을 수정하는 방법은 무엇입니까?

분류에서Dev

루트가 소스 디렉토리에 액세스 할 수있는 권한이 없을 때 마운트 --bind를 만드는 방법은 무엇입니까?

분류에서Dev

Blazor 서버를 사용할 때 클라이언트 DOM 자바 스크립트 이벤트 핸들러를 추가하는 방법은 무엇입니까?

분류에서Dev

xsd에서 include 파일을 병합 할 때 이중 요소를 방지하는 방법은 무엇입니까?

분류에서Dev

핸들러에 인수가있을 때 이벤트 클릭 객체를 얻는 방법

분류에서Dev

핸들러 메소드를 찾을 수없는 이유는 무엇입니까?

분류에서Dev

POST AJAX 요청을 통해 제출할 때 양식에 데이터를 추가하는 방법은 무엇입니까?

분류에서Dev

package.json에 bcrypt를 추가 할 때 docker node alpine Image로 "사용할 Python 설치를 찾을 수 없음"을 해결하는 방법은 무엇입니까?

분류에서Dev

버튼을 다시 클릭 할 때 여기서 핸들러를 중지하는 방법은 무엇입니까?

분류에서Dev

ClassName을 추가하고 React.JS에서 onScroll 이벤트를 제거하는 방법은 무엇입니까?

분류에서Dev

Angular 2의 이벤트 핸들러에서 html 요소 속성 / 속성을 전달하는 방법은 무엇입니까?

분류에서Dev

메소드의 예외 핸들러에서 JUnit 테스트를 실행하는 방법과 함수가 일반적으로 입력을 위해 파일을 사용할 때 어떻게합니까?

분류에서Dev

kivy 스위치 항목에 대한 클릭을 해제 할 때 하나의 이벤트를 발생시키는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    이벤트에 DOM 요소를 생성 한 다음 DOM 요소가 존재할 때까지 이벤트 핸들러가 트리거되는 것을 방지하는 방법은 무엇입니까?

  2. 2

    DOM Ready를위한 이벤트 핸들러를 추가 할 때 너무 늦을 수는 없나요?

  3. 3

    Android의 Firebase-필요할 때 데이터 검색을위한 이벤트 핸들러를 실행하는 방법은 무엇입니까?

  4. 4

    HTML에서 JSX와 같은 방식으로 이벤트 핸들러를 추가 할 수없는 이유는 무엇입니까?

  5. 5

    "이벤트 핸들러에서 데이터베이스에 변경 사항을 저장할 수 없음"을 해결하는 방법은 무엇입니까?

  6. 6

    fullCalendar에 이벤트를 동적으로 추가 할 때 eventClick을 사용하는 방법은 무엇입니까?

  7. 7

    사용자가 SwiftUI에서 길게 누르기 제스처를 중지 할 때 이벤트 핸들러를 실행하는 방법은 무엇입니까?

  8. 8

    숫자를 텍스트로 변환 할 때 추가 "수백"을 제거하는 방법은 무엇입니까?

  9. 9

    양식을 제출할 때 URL 데이터 (변수)를 추가하는 방법은 무엇입니까?

  10. 10

    사용자가 텔레 그램 봇에 유효한 응답을 할 때까지 함수와 핸들러를 반복하는 방법은 무엇입니까?

  11. 11

    각도에서 지시문을 사용할 때 자식 요소에 이벤트를 첨부하는 가장 좋은 방법은 무엇입니까?

  12. 12

    배열을 정의 할 때 초기화하는 경우 배열에 여러 요소를 제자리에 할당 할 수없는 이유는 무엇입니까?

  13. 13

    VB6에서 핸들 (이벤트 핸들러가 아님)을 만드는 방법은 무엇입니까?

  14. 14

    Varnish에 사이트를 추가 할 때 반복 sed 명령을 피하는 방법은 무엇입니까?

  15. 15

    Aframe 구성 요소는 이벤트 핸들러에서 el을 참조 할 수 없습니다.

  16. 16

    비디오 재생을 시작할 때 videojs에 이벤트 리스너를 추가하는 방법은 무엇입니까?

  17. 17

    Windows 7에서 Firefox가 소리를 재생할 때 VLC 미디어 볼륨 제한을 수정하는 방법은 무엇입니까?

  18. 18

    루트가 소스 디렉토리에 액세스 할 수있는 권한이 없을 때 마운트 --bind를 만드는 방법은 무엇입니까?

  19. 19

    Blazor 서버를 사용할 때 클라이언트 DOM 자바 스크립트 이벤트 핸들러를 추가하는 방법은 무엇입니까?

  20. 20

    xsd에서 include 파일을 병합 할 때 이중 요소를 방지하는 방법은 무엇입니까?

  21. 21

    핸들러에 인수가있을 때 이벤트 클릭 객체를 얻는 방법

  22. 22

    핸들러 메소드를 찾을 수없는 이유는 무엇입니까?

  23. 23

    POST AJAX 요청을 통해 제출할 때 양식에 데이터를 추가하는 방법은 무엇입니까?

  24. 24

    package.json에 bcrypt를 추가 할 때 docker node alpine Image로 "사용할 Python 설치를 찾을 수 없음"을 해결하는 방법은 무엇입니까?

  25. 25

    버튼을 다시 클릭 할 때 여기서 핸들러를 중지하는 방법은 무엇입니까?

  26. 26

    ClassName을 추가하고 React.JS에서 onScroll 이벤트를 제거하는 방법은 무엇입니까?

  27. 27

    Angular 2의 이벤트 핸들러에서 html 요소 속성 / 속성을 전달하는 방법은 무엇입니까?

  28. 28

    메소드의 예외 핸들러에서 JUnit 테스트를 실행하는 방법과 함수가 일반적으로 입력을 위해 파일을 사용할 때 어떻게합니까?

  29. 29

    kivy 스위치 항목에 대한 클릭을 해제 할 때 하나의 이벤트를 발생시키는 방법은 무엇입니까?

뜨겁다태그

보관