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

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 >
    <nav >
      <a href="">Logo</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Abou</a>t</li>
        <!-- page-direction -->
        <div >
          <div ><button >RTL</button>
          </div>
          <div ><button >LTR</button>
          </div>
        </div>
        <!-- page-direction end -->
      </ul>
    </nav>
  </body>

</html>

CodePudding user response：

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 >
    <nav >
      <a href="">Logo</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Abou</a>t</li>
        <!-- page-direction -->
        <div >
          <div ><button >RTL</button>
          </div>
          <div ><button >LTR</button>
          </div>
        </div>
        <!-- page-direction end -->
      </ul>
    </nav>
  </body>

</html>

CodePudding user response：

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

also

document.documentElement.lang = 'AR'

Attention this;

<script>Code Here</script>

HTMLElement.lang Description