setAttribute、onclick、eventListener 不起作用
setAttribute, onclick, eventListener won't work
所以我在 javascript 中有这段代码,它替换了 html 中的文本,具体取决于您单击的语言(罗马尼亚语或英语,默认为罗马尼亚语)。我尝试了我知道的所有 3 种点击操作方式,但其中 none 有效。你能帮帮我吗?
编辑:
前几条指令根本不起作用(没有任何反应,即使点击它们也没有)。然后,最后一对夫妇在加载时执行(但在单击它们之后不工作)。我看到将 addEventListener 与侦听器函数一起使用不适用于其他参数,而不仅仅是事件本身,但我仍然对其他方式感到困惑
<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> ```
.addEventListener
将回调作为第二个参数,因此在添加函数时不需要 ()
。
此外,您可以在回调函数中使用 this
来引用触发事件的元素 - 这只是稍微清理了函数代码 - 您不需要包含任何参数到您的 languageChange
函数
LocalStorage 不适用于此站点上的代码段,因此我写了一个快速 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;
}
}
}
我对您的 code.First 进行了一些更改,我认为您可以直接从 a
标记调用函数而无需 window.onload
。我在您的代码中发现的一个问题是,当您发送 optEngl
时,您只是作为 optEngl
发送而没有任何引号,这让 js 认为它不是字符串。然后,我使用 localeCompare
而不是 ==
修改了 languageChange
函数中的字符串比较。然后,它工作正常。我希望这有帮助。
<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>
如果您想查看结果,请查看 jsfiddle 片段
通过使用 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>
所以我在 javascript 中有这段代码,它替换了 html 中的文本,具体取决于您单击的语言(罗马尼亚语或英语,默认为罗马尼亚语)。我尝试了我知道的所有 3 种点击操作方式,但其中 none 有效。你能帮帮我吗?
编辑:
前几条指令根本不起作用(没有任何反应,即使点击它们也没有)。然后,最后一对夫妇在加载时执行(但在单击它们之后不工作)。我看到将 addEventListener 与侦听器函数一起使用不适用于其他参数,而不仅仅是事件本身,但我仍然对其他方式感到困惑
<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> ```
.addEventListener
将回调作为第二个参数,因此在添加函数时不需要 ()
。
此外,您可以在回调函数中使用 this
来引用触发事件的元素 - 这只是稍微清理了函数代码 - 您不需要包含任何参数到您的 languageChange
函数
LocalStorage 不适用于此站点上的代码段,因此我写了一个快速 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;
}
}
}
我对您的 code.First 进行了一些更改,我认为您可以直接从 a
标记调用函数而无需 window.onload
。我在您的代码中发现的一个问题是,当您发送 optEngl
时,您只是作为 optEngl
发送而没有任何引号,这让 js 认为它不是字符串。然后,我使用 localeCompare
而不是 ==
修改了 languageChange
函数中的字符串比较。然后,它工作正常。我希望这有帮助。
<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>
如果您想查看结果,请查看 jsfiddle 片段
通过使用 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>