Why I added the code is so that it helps to figure out the bug.It takes to clicks to change the direction of the navbar and language of the website. After two click it works smoothly.Only first time it cause issue.
In the same function, the direction of the navbar is also changing if i click arabic the navbar direction changes from right to left and vice-versa.
function languageChanger() {
const link = document.querySelector(".languagewrap");
const headingEl = document.querySelector(".heading");
const descr1El = document.querySelector(".description1");
const descr2El = document.querySelector(".description2");
// Introduction
const introductionEl = document.querySelector("#introduction");
const introductiondetailEl = document.querySelector("#introduction-detail");
const introductionreadmoreEl = document.querySelector("#readmore");
// Contact Us
const contactUsHeadingEl = document.querySelector(".contactusheading");
const contactUsDescEl = document.querySelector(".contactusdescription");
const contactbuttonEl = document.querySelector(".contactbutton");
const rights = document.querySelector(".rights");
if (link.innerHTML == "عربى") {
localStorage.setItem("lang" , 1 )
document.body.style.setProperty("font-family", "Tajawal", "important");
headingEl.textContent = data["عربى"].heading;
descr1El.textContent = data["عربى"].description1;
descr2El.textContent = data["عربى"].description2;
introductionEl.textContent = data["عربى"].introduction;
introductiondetailEl.textContent = data["عربى"].introductiondetail;
introductionreadmoreEl.textContent = data["عربى"].introductionreadmore;
contactUsHeadingEl.textContent = data["عربى"].contactusheading;
contactUsDescEl.textContent = data["عربى"].contactusdescription;
contactbuttonEl.textContent = data["عربى"].contactbutton;
var arabic = document.getElementById("arabic");
arabic.style.display = "grid";
var english = document.getElementById("english");
english.style.display = "none";
var y = document.getElementById("content-direction-change");
y.style.textAlign = "right";
rights.textContent = data["عربى"].rights;
link.innerHTML = "English";
} else {
localStorage.setItem("lang" , 0 )
document.body.style.setProperty("font-family", "Lato", "important");
headingEl.textContent = data["english"].heading;
descr1El.textContent = data["english"].description1;
descr2El.textContent = data["english"].description2;
introductionEl.textContent = data["english"].introduction;
introductiondetailEl.textContent = data["english"].introductiondetail;
introductionreadmoreEl.textContent = data["english"].introductionreadmore;
contactUsHeadingEl.textContent = data["english"].contactusheading;
contactUsDescEl.textContent = data["english"].contactusdescription;
contactbuttonEl.textContent = data["english"].contactbutton;
link.innerHTML = "عربى";
var arabic = document.getElementById("arabic");
arabic.style.display = "none";
var english = document.getElementById("english");
english.style.display = "grid";
var y = document.getElementById("content-direction-change");
y.style.textAlign = "left";
rights.textContent = data["english"].rights;
}
var x = document.getElementById("navbar-direction-change");
if (x.style.flexDirection === "row") {
x.style.flexDirection = "row-reverse";
} else if (x.style.flexDirection === "row-reverse") {
x.style.flexDirection = "row";
} else {
x.style.flexDirection = "row";
}
var y = document.getElementById("content-direction-change");
if (y.style.flexDirection === "row") {
y.style.flexDirection = "row-reverse";
y.style.textAlign = "right";
} else if (x.style.flexDirection === "row-reverse") {
y.style.flexDirection = "row";
} else {
y.style.flexDirection = "row";
}
} <nav id="navbar-direction-change" class="navbar">
<div class="logoimage">
<img class="desktop-logo" src="/images/logo.svg" alt="D360" />
<img
class="mobile-logo"
src="/images/mobile-logo.svg"
alt="D360"
/>
</div>
<ul id="menu" class="menu">
<li class="aboutUsNav"><a href="about-us.html"> About </a></li>
<li
class="languagewrap"
id="language"
onclick="languageChanger()"
>
<a>عربى</a>
</li>
</ul>
</nav>