создание смены языка (с помощью плагина select2) и простой js - PullRequest
Новая
       7

создание смены языка (с помощью плагина select2) и простой js

0 голосов
/ 01 марта 2020

Создание простого тестового приложения, которое должно изменять языки HTML элементов, когда выбран флаг (представляющий язык) из <select>. Элемент <select> выполняется с помощью плагина jQuery select2 .

Я решил создать eventListeners для флагов, надеясь, что event handlers, который я написал, может вставить соответствующий язык в h2 заголовок из h2Text объекта. Но это не работает. Я также заметил, что обработчики событий запускаются без щелчка.

Может кто-нибудь подсказать мне решение этой проблемы?

HTML: 

<body>
<div>


        <div>
            <h2 id="h2welcome">Welcome to Task List App</h2>
        </div>




    <div>
        <select id="lang">
            <option value="uk" id="uk">English</option>
            <option value="pl" id="pl">Polish</option>
        </select>
    </div>

</div>

<script src="jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="select2.js"></script>

JAVA SCRIPT (select2. js): 

 //select2
 $(document).ready(function(){
     $("#lang").select2({
         templateResult: showflag,
         //hiding search bar
         minimumResultsForSearch: Infinity
     });
 });

 // select2 - configuring flag display
 function showflag (state) {
     if (!state.id) {
       return state.text;
     }
     var baseUrl = "img";
     var $state = $(
       '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img- 
        flag" /> ' +  '</span>'
     );
     return $state;
     };

   // code for language
 h2Text = {
     uk: "Welcome To Task List App",
     pl: "Witaj w aplikacji Lista Zadań" 
 };

 const ukButton = document.getElementById("uk");
 const plButton = document.getElementById("pl");
 const h2welcome = document.getElementById("h2welcome");



 function loadEventListeners() {
     ukButton.addEventListener("click", changeUk());
     plButton.addEventListener("click", changePl());
 };

 function changeUk(){
     console.log(h2Text["uk"]);
     h2welcome.innerHTML = h2Text["uk"];
 };

 function changePl(){
     console.log(h2Text["pl"]);
     h2welcome.innerHTML = h2Text["pl"];   
 };
...