setAttribute, onclick, eventListener won't work
Question
So i have this code in javascript that replaces the text from the html, depending on the language you click on ( romanian or english, default is romanian). I tried all of the 3 ways i know for the click action, but none of them work. Can you please help me?
EDIT:
The first couple of instructions don't work at all ( nothing happens, not even when clicking on them). Then, the last bouth couples execute at the onload (but don't work after, when click on them). I see that using addEventListener with the listener function doesn't work with other parameters than just the event itself, but I'm still confused about the other ways
<html lang = "en">
<head>
<title>
Website
</title>
<meta charset = "UTF-8">
</head>
<body>
<a id='english' >English</a>
<a id='romanian'>Romanian</a>
<p id="paragraph">
Bine ai venit pe site-ul meu!
</p>
<script>
localStorage.setItem("languageStored" , "romanian");
var language = {
eng: {
welcome: "Welcome to my website!"
},
ro: {
welcome: "Bine ai venit pe site-ul meu!"
}
};
window.onload = function()
{
let optEngl = document.getElementById('english');
let optRo = document.getElementById('romanian');
// optRo.setAttribute('click' ,'languageChange(this , optRo)' );
// optEngl.setAttribute('click','languageChange(this , optEngl)');
// optEngl.onclick = languageChange(this , optEngl);
// optRo.onclick = languageChange(this , optRo);
// optEngl.addEventListener("click" , languageChange(this , optEngl));
// optRo.addEventListener("click" , languageChange(this , optRo));
}
function languageChange(e , obj)
{
let languageStored = localStorage.getItem("languageStored");
if(languageStored != obj.id)
{
console.log(obj.id);
languageStored = obj.id;
localStorage.setItem("languageStored" , languageStored);
if(languageStored == "english")
document.getElementById('paragraph').textContent = language.eng.welcome;
else
document.getElementById('paragraph').textContent = language.ro.welcome;
}
}
</script>
</body>
</html> ```
2 answers
solution1
1 ACCPTED 2020-01-05 17:44:27
.addEventListener takes a callback as the second parameter, so you don't need the () when you're adding your function.
Also, you can use this inside the callback function to refer to the Element that the Event triggered from - this just cleans up the function code a little bit - You don't need to includig any parameters to your languageChange function
LocalStorage doesn't work with Snippets on this site, so I wrote a quick Codepen to show the changes
localStorage.setItem("languageStored", "romanian");
var language = {
eng: {welcome: "Welcome to my website!"},
ro: {welcome: "Bine ai venit pe site-ul meu!"}
};
window.onload = function() {
let optEngl = document.getElementById('english');
let optRo = document.getElementById('romanian');
optEngl.addEventListener('click', languageChange);
optRo.addEventListener('click', languageChange);
}
function languageChange() {
// Get the Language stored
let languageStored = localStorage.getItem("languageStored");
// You can use `this` rather than `obj` to refer to the Clicked Element
if (languageStored != this.id) {
languageStored = this.id;
localStorage.setItem("languageStored", languageStored);
if (languageStored == "english")
document.getElementById('paragraph').textContent = language.eng.welcome;
else
document.getElementById('paragraph').textContent = language.ro.welcome;
}
}
}
solution2
1 2020-01-05 17:58:40
I made couple of changes to your code.First, I think you can directly call functions from a tag and no need of window.onload . One issue I found with your code was when you were sending optEngl you were just sending as optEngl without any quotes which made js think it wasn't string. Then, I modified your string comparison within languageChange function using localeCompare rather than == . Then, it worked fine. I hope this helps.
<html lang="en">
<head>
<title>
Website
</title>
<meta charset="UTF-8">
</head>
<body>
<a id='english' onClick="languageChange(this , 'optEngl');">English</a>
<a id='romanian' onClick="languageChange(this , 'optRo');">Romanian</a>
<p id="paragraph">
Bine ai venit pe site-ul meu!
</p>
<script type="text/javascript">
localStorage.setItem("languageStored", "romanian");
var language = {
eng: {
welcome: "Welcome to my website!"
},
ro: {
welcome: "Bine ai venit pe site-ul meu!"
}
};
function languageChange(e, obj) {
let languageStored = localStorage.getItem("languageStored");
if (languageStored != obj) {
localStorage.setItem("languageStored", obj);
if (languageStored.localeCompare("optEngl")) {
document.getElementById('paragraph').textContent = language.eng.welcome;
} else {
document.getElementById('paragraph').textContent = language.ro.welcome;
}
}
}
</script>
</body>
</html>
If you want to see results, check out jsfiddle snippet
By using javascript:
<html lang="en">
<head>
<title>
Website
</title>
<meta charset="UTF-8">
</head>
<body>
<a id='english'>English</a>
<a id='romanian'>Romanian</a>
<p id="paragraph">
Bine ai venit pe site-ul meu!
</p>
<script type="text/javascript">
localStorage.setItem("languageStored", "romanian");
var language = {
eng: {
welcome: "Welcome to my website!"
},
ro: {
welcome: "Bine ai venit pe site-ul meu!"
}
};
window.onload = function() {
let optEngl = document.getElementById('english');
let optRo = document.getElementById('romanian');
optEngl.onclick = function() {
languageChange(this, "optEngl");
}
optRo.onclick = function() {
languageChange(this, "optRo");
}
}
function languageChange(e, obj) {
let languageStored = localStorage.getItem("languageStored");
if (languageStored != obj) {
localStorage.setItem("languageStored", obj);
if (languageStored.localeCompare("optEngl")) {
document.getElementById('paragraph').textContent = language.eng.welcome;
} else {
document.getElementById('paragraph').textContent = language.ro.welcome;
}
}
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.