CODEWITHSUNDEEP
javascript
Hefm
Hefm

Reputation: 61

How to fire change language event without refreshing page?

I have created this code. It works but the event listener does not work without refreshing the page.

the case happened just when i click than refresh page 

<h1 class="text-center" id="hi">hello i `m english </h1>

javascript

    var navbarLang = document.querySelector('#navbar-cms .nav-container');

// create language button 
// arabic
var creatbtnAr = document.createElement("a");
creatbtnAr.innerHTML = "AR";
creatbtnAr.classList.add("buttonAr");
creatbtnAr.href = "#ar";
creatbtnAr.setAttribute("data-reload",'');
navbarLang.appendChild(creatbtnAr);

// english
var creatbtnEr = document.createElement("a");
creatbtnEr.innerHTML = "En";
creatbtnEr.classList.add("buttonEr");
creatbtnEr.href = "#en";
creatbtnEr.setAttribute("data-reload",'');
navbarLang.appendChild(creatbtnEr);


// define language reload anchors 
var dataReload = document.querySelectorAll("[data-reload]");
// define tags need to change language 
var sec1 = document.querySelector('#hi');
// language translats 
var language = {
    en:{
      welcome : "hhhhhhhhhhhhh"

    },
    ar:{
      welcome : "نعم نعم نعم نعم"
    }
 }
    // define language via window hash 
      if(window.location.hash){
        if(window.location.hash === "#ar" ){
          sec1.textContent = language.ar.welcome;
        }
      }

    // define language reload onclick 
    for (i = 0; i<= dataReload.length; i++){
      dataReload[i].EventTarget.addEventListener("click", function(){
        location.reload(true);
//          Event.preventDefault;
      });
    }

https://codepen.io/hesham-farag/pen/MNQRKE

Upvotes: 0

Views: 926

Answers (1)

guijob
guijob

Reputation: 4488

One possible way to do it without refreshing is using events:

var navbarLang = document.querySelector('#navbar-cms .nav-container');

// create language button 
// arabic
var creatbtnAr = document.createElement("a");
creatbtnAr.innerHTML = "AR";
creatbtnAr.classList.add("buttonAr");
creatbtnAr.href = "#ar";
creatbtnAr.setAttribute("data-reload",'');
creatbtnAr.addEventListener('click', event => {
  translate('ar');
});
navbarLang.appendChild(creatbtnAr);

// english
var creatbtnEr = document.createElement("a");
creatbtnEr.innerHTML = "En";
creatbtnEr.classList.add("buttonEr");
creatbtnEr.href = "#en";
creatbtnEr.setAttribute("data-reload",'');
creatbtnEr.addEventListener('click', event => {
  translate('en');
});
navbarLang.appendChild(creatbtnEr);

function translate(language) {
  if(language === 'en') {
    document.getElementById('hi').textContent = 'hhhhhhhhhhhhh';
  }
    if(language === 'ar') {
    document.getElementById('hi').textContent = 'نعم نعم نعم نعم';
  }
}
#navbar-cms .nav-container{
  position: relative;
}
#navbar-cms .buttonAr{
  position: absolute;
  top:4px;
  left: 100px;
  background:#333;
  z-index: 9999;
  color:#fff;
  padding:10px 20px;
  border-radius:5px;
  cursor: pointer;
}

#navbar-cms .buttonEr{
  position: absolute;
  top:4px;
  left: 140px;
  background:#333;
  z-index: 9999;
  color:#fff;
  padding:10px 20px;
  border-radius:5px;
  cursor: pointer;
}
<div class="navbar navbar-fixed-top" id="navbar-cms">
	<div class="navbar-inner">
		<div class="container-fluid nav-container">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>
			<a class="brand" href="https://weastlms.com/index"><img src="https://d3j0t7vrtr92dk.cloudfront.net/weastlms/1562545149_50x40%20logo.png?" class="avatar-square"></a>
			<div class="nav-collapse collapse">
				
			</div>
		</div>
	</div>
</div>
<br><br><br><br><br>
<h1 class="text-center" id="hi">hello i `m english </h1>

Upvotes: 1

Related Questions