Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected language does not carry over. For example, if I select 'th' on the first page, the subsequent pages should display '/th' instead of '/en'. Currently, the common header file always displays '/en', regardless of the chosen language in the dropdown. How can I use JavaScript to update all href links based on the selected language?
I need to dynamically update all href links when a specific language is selected from the dropdown.
//header.ejs
<body>
<nav>
<ul>
<li class="nav-item">
<a class="nav-link" href="/en/about" style="margin-right: 1.5rem!important;">about us</a>//change this link
</li>
<li class=" nav-item">
<a class="nav-link" href="/en/contact"
style="margin-right: 1.5rem!important;">contact us</a>
</li>//change this link
</ul>
<div class="dropdown">
<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
<a class="dropdown-item" href="javascript:" onclick="setLanguage('en')">English</a>
<a class="dropdown-item" href="javascript:" onclick="setLanguage('th')">Thai</a>
</div>
</div>
</nav>
</body>