对于循环错误:未捕获的引用错误，未定义变量.怎么了

For loop error: Uncaught ReferenceError, variable is not defined. What's wrong?

本文关键字：错误 引用 怎么了 变量 未定义 于循环 循环      更新时间：2023-09-26

我创建了一个 css 菜单，我想让它们中的每一个在鼠标悬停事件时改变它们的颜色（我只是在学习 javascript，特别是 for 循环，我知道可以用 CSS3 实现这一点）。

所以，它不起作用，我在 DOM 控制台上收到此错误：Uncaught ReferenceError: linkIdOn is not defined (line 44)

这是我的 CSS：

<body>
<div id="menuPrincipal">
<div id="link1" class="link"><a href="">Link 1</a></div>
<div id="link2" class="link"><a href="">Link 2</a></div>
<div id="link3" class="link"><a href="">Link 3</a></div>
<div id="link4" class="link"><a href="">Link 4</a></div>
</div>

这是我的javascript：

    function cambioColorOnMouseover(){
    for (linkId=1; linkId<5; linkId++){
        var linkIdOn='link'+linkId;
        document.getElementById(linkIdOn).style.backgroundColor="#eee";
        console.log(linkIdOn);
    }
}
function cambioColorOnLeave(){
    for (linkId=1; linkId<5; linkId++){
        var linkIdOff='link'+linkId;
        document.getElementById(linkIdOff).style.backgroundColor="#ccc";
        console.log(linkIdOff);
    }
}
document.getElementById('link'+linkIdOn).onmouseover=cambioColorOnMouseover;  <-- line 44
document.getElementById('link'+linkIdOff).onmouseout=cambioColorOnLeave;

linkIdOn的范围仅限于cambioColorOnMouseover。但这不是你唯一的问题。你需要移动几件东西。

我的建议：

for(var linkId = 1; linkId < 5; linkId++) {
    document.getElementById('link'+linkId).onmouseover = function() {
        this.style.backgroundColor = "#eee";
        console.log(this.id);
    };
    document.getElementById('link'+linkId).onmouseout = function() {
        this.style.backgroundColor = "#ccc";
        console.log(this.id);
    };
}

为了其他不知道 CSS3 方法的人的利益（尽管 OP 想在 JavaScript 中做到这一点，这是首选方法）：

#link1, #link2, #link3, #link4, #link5 {
    background-color: #ccc;
}
#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover {
    background-color: #eee;
}

虽然如果你做了CSS，你可能会有一个link类而不是使用ids。

（

我更改了两个阻止示例工作的小错别字（系统告诉我编辑必须至少为 6 个字符）感谢您的帮助！ - 罗莎蒙达）

您可能想执行以下操作：

function linkOn() {
  this.style.backgroundColor = '#eee';
}
function linkOff() {
  this.style.backgroundColor = '#ccc';
}
window.onload = function() {
  var links = document.links;
  for (var i=0, iLen=links.length; i<iLen; i++) {
    links[i].onmouseover = linkOn;
    links[i].onmouseout = linkOff;
  }
}

尽管您最好添加和删除一个类，以便您可以通过CSS而不是脚本来控制效果。

相关文章：