How to change Html lang attribute from lang="en" to lang="ar" using JavaScript

Question

welcome I searched a lot here for a solution to my question and unfortunately I couldn't find a definitive answer. I tried these answers on this question How to set HTML lang attribute dynamically? but it didn't work for me.

I created language switch button between English as default and Arabic as second language and it works fine in changing the direction of my html page from left to right because the second language is Arabic, but the attribute (lang="en") in tag does not change to (lang="ar") When the page is turned to the right, assuming that the page content will be in Arabic. Kindly Help me to implement this function. please review the attribute lang on changing to RTL I want when I press the converter button the value of attribute lang change from en to ar. Thank You all,

(function ($) {
  "use strict";
  
$(".direction_switch button").click(function () {
    $("body").toggleClass(function () {
      return $(this).is(".rtl, .ltr") ? "rtl ltr" : "rtl";
    });
  });
  
  })(window.jQuery);

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}
ul {
  list-style: none;
}
.menu {
  display: block;
}
.menu ul {
  display: inline-flex;
}
.menu ul li {
  padding: 0 10px;
}
body.ltr .demo-ltr {
  display: none;
}
body.ltr .demo-rtl {
  display: block;
}
body.ltr .demo-rtl button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}
body.rtl .demo-rtl {
  display: none;
}
body.rtl .demo-ltr {
  display: block;
}
body.rtl .demo-ltr button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>

  </head>

  <body class="ltr">
    <nav class="menu">
      <a href="">Logo</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Abou</a>t</li>
        <!-- page-direction -->
        <div class="page_direction">
          <div class="demo-rtl direction_switch"><button class="rtl">RTL</button>
          </div>
          <div class="demo-ltr direction_switch"><button class="ltr">LTR</button>
          </div>
        </div>
        <!-- page-direction end -->
      </ul>
    </nav>
  </body>

</html>

Does this answer your question? [How to set HTML lang attribute dynamically?](https://stackoverflow.com/questions/35187645/how-to-set-html-lang-attribute-dynamically) — Hamza Zafeer, Feb 15 '22 at 13:01
Your `toggleClass` call looks wrong to me. I suspect you wanted something like `$("body").toggleClass("ltr").toggleClass("rtl");` instead. — Richard Deeming, Feb 15 '22 at 13:14
Also, I'm sure you're already aware, but just to be clear: changing the `lang` attribute won't actually translate your page. You'll need to do that yourself. — Richard Deeming, Feb 15 '22 at 13:15
@RichardDeeming Yes you are right but I am looking for the possibility of using JS I18n for translation and I hope you can help me if you can — Hatem Frere, Feb 15 '22 at 13:20

score 2 · Answer 1 · answered Feb 15 '22 at 13:15

2

document.documentElement.setAttribute('lang', 'AR');

also

document.documentElement.lang = 'AR'

Attention this;

<script>Code Here</script>

HTMLElement.lang Description

answered Feb 15 '22 at 13:15

Burak Odabaş

347
2
8

score 1 · Accepted Answer · answered Feb 15 '22 at 13:07

You can use attr(attribute,function) method in jQuery and change the attribute of your HTML tag like this:

In the code, i is the index position of the set and v is the current value of the attribute (before change)

(function ($) {
  "use strict";
  
$(".direction_switch button").click(function () {
    $("body").toggleClass(function () {
      return $(this).is(".rtl, .ltr") ? "rtl ltr" : "rtl";
    });

    //Changing attribute of HTML tag
    $("html").attr("lang",(i,v)=>{
        return v=="en"?"ar":"en"
    })});
  
  })(window.jQuery);

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}
ul {
  list-style: none;
}
.menu {
  display: block;
}
.menu ul {
  display: inline-flex;
}
.menu ul li {
  padding: 0 10px;
}
body.ltr .demo-ltr {
  display: none;
}
body.ltr .demo-rtl {
  display: block;
}
body.ltr .demo-rtl button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}
body.rtl .demo-rtl {
  display: none;
}
body.rtl .demo-ltr {
  display: block;
}
body.rtl .demo-ltr button {
  background-color: transparent;
  color: #000;
  border: 1px solid;
  padding: 0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>

  </head>

  <body class="ltr">
    <nav class="menu">
      <a href="">Logo</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Abou</a>t</li>
        <!-- page-direction -->
        <div class="page_direction">
          <div class="demo-rtl direction_switch"><button class="rtl">RTL</button>
          </div>
          <div class="demo-ltr direction_switch"><button class="ltr">LTR</button>
          </div>
        </div>
        <!-- page-direction end -->
      </ul>
    </nav>
  </body>

</html>

Please i want to add (/lang-name) to domain after URL for the selected language except en as a default language, can you help me or guide me to another links? — Hatem Frere, Feb 15 '22 at 13:53
@HatemFrere /url means you're navigating to a new page, if you want to add /lang-name to domain after URL, just create a new file with the name and link it to your index page — Lokendra Soni, Feb 17 '22 at 08:12

How to change Html lang attribute from lang="en" to lang="ar" using JavaScript

2 Answers2