JQuery click function doesn't trigger unless double clicked first

I have a div with class language-switch in a navigation bar that acts as a button to change the language. I wrote a JQuery code to change the class of the Main id and text inside the div, but it can only trigger after the second initial clicks.

I already tried wrapping it in $(document).ready(function(){} to no avail.

Confusingly I also have a button to change the theme from light to dark called mode-switch and it works the first time without having to be double clicked first.

Here's the html for it.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar-wrapper">
        <div class="topnav" id="myTopnav">
          <span class="menu">
            <div class="language-switch">
                <div class="language">EN </div>
                <i class="fa fa-globe"></i>
            </div>
            <div class="mode-switch">
                <i class="fa fa-sun-o"></i>
            </div>
          </span>
        </div>
      </div>

JavaScript for the language-switch button.

$(document).ready(function(){
    $(function changeLanguage(){
        $(".language-switch").click(function(){
        if ($(this).children(".language").text() == "EN") {
            $(this).children(".language").text("ID");
            $("#main").attr("class", "lang-id");
        }
        else {
            $(this).children(".language").text("EN");  
            $("#main").attr("class", "lang-en");      
        }
        console.log($(this).children(".language").text());
        console.log($("#main").attr("class"));
        });   
    });
});

and the JavaScript for mode-switch button.

$(document).ready(function(){
    $(".mode-switch").click(function(){
      $("i", this).toggleClass("fa-moon-o fa-sun-o");
      $(".light-theme").toggleClass("dark-theme");
      console.log($(this).attr("class"));
    });   
});

You have a function changeLanguage which in turn creates an event listener on $(".language-switch") elements. It appears the changeLanguage function is never actually called in the code provided.

Additionally you have a trailing space in the language node so, initially "EN " != "EN"

Just use:

$(document).ready(function(){
    /*$(function changeLanguage(){ -- remove the function*/
        $(".language-switch").click(function(){
        if ($(this).children(".language").text().trim() == "EN") {
            $(this).children(".language").text("ID");
            $("#main").attr("class", "lang-id");
        }
        else {
            $(this).children(".language").text("EN");  
            $("#main").attr("class", "lang-en");      
        }
        console.log($(this).children(".language").text());
        console.log($("#main").attr("class"));
        });   
   /* }); */
});

Also consider using classAdd. classRemove or classToggle instead of overriding the class attribute entirely

$(document).ready(function(){
        $(".language-switch").click(function(){
        var isEn = $(this).children(".language").text("ID").trim() == "EN";

        $(this).children(".language").text(isEn ? "ID" : "EN");
        $("#main").togglClass("lang-id", isEn)
                  .togglClass("lang-en", !isEn);

        console.log($(this).children(".language").text());
        console.log($("#main").attr("class"));
        });   
});