JavaScript循环不起作用

我是一名初学者，我试图重写在CSS中的:hover伪类不让我触发事件，如果我徘徊在其他元素下面的元素。JavaScript循环不起作用

如果我将鼠标悬停在div上，则css过渡将会启动，但是，如果我查看div上方视觉上的文本，则不会发生任何情况。

我有四个这样的元素，所以我试图用getElementsByClassName方法来创建JavaScript来迭代数组，但控制台给我总是

index.html:77 Uncaught TypeError: Cannot read property 'style' of 
    undefined 
    at stretchback (index.html:77) 
    at HTMLParagraphElement.onmouseout (index.html:24) 
    stretchback @ index.html:77 
    onmouseout @ index.html:24 

<script> 
    var boxes = document.getElementsByClassName('skill-box'); 
    function stretch() { 
    for (var i=0; i < boxes.length; i++) 
    boxes[i].style.opacity = "0.3"; 
    boxes[i].style.transform = "scaleY(10)"; 
    boxes[i].style.borderRadius = "0px"; 
    boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out"; 
     } 
    function stretchback() { 
    for (var i=0; i < boxes.length; i++) 
    boxes[i].style.opacity = "1"; 
    boxes[i].style.transform = "scaleY(1)"; 
    boxes[i].style.borderRadius = "10px"; 
    boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";    } 
</script>

什么我做错了同样的错误？

来源

2017-10-17 Krisztian Toth

可以CONSOLE.LOG（盒）？ – Akhil

仅供参考：'我 epascarello

快速浏览一下，我实际上可以在这里看到一些错误。对于初学者来说，你重新声明相同的变量并覆盖它们的值，所以你的变量可能没有你认为的那些。你也在迭代一个动态获取的元素集，而不是遍历你正在使用的数组（'box'，这应该是复数）。所以如果任何东西改变了DOM的状态，那么这些长度可能并不总是相等的。 – David

似乎是一个范围界定问题。尝试在拉伸和回弹函数内移动您的框和技能变量声明。

来源

2017-10-17 20:42:06 sm1215

我已经试过了。错误消息是相同的。 –

够公平的，第二遍看，似乎你的循环缺少花括号。添加它们会消除错误：https：//codepen.io/sm1215/pen/eGbdYR – sm1215

如何使用addEventListener（'mouseenter'）而不是做悬停的CSS。

来源

2017-10-17 20:48:34 Keming

您可能想要避免覆盖变量，如下所示。快乐阐述，如果下面的代码可以帮助

上jsbin

function stretch() { // maybe call this expand? 
    var boxes = document.getElementsByClassName('skill-boxes'); 
    var skills = document.getElementsByClassName('para'); 

    for (var i=0; i < boxes.length; i++) { 
     boxes[i].style.opacity = "0.3"; 
     boxes[i].style.transform = "scaleY(10)"; 
     boxes[i].style.borderRadius = "0px"; 
     boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out"; 
    } 
} 

function stretchback() { // maye call this shrink? 
    var boxes = document.getElementsByClassName('skill-boxes'); 
    var skills = document.getElementsByClassName('para'); 

    for (var i=0; i < boxes.length; i++) { 
     boxes[i].style.opacity = "1"; 
     boxes[i].style.transform = "scaleY(1)"; 
     boxes[i].style.borderRadius = "10px"; 
     boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out"; 
    } 
}

来源

2017-10-17 20:50:39 Varinder

这是一个很简单的......你错过了你的for环的开口大括号：

for (var i=0; i < box.length; i++) { // <-- for example, here

我已经使用box.length，因为你已经有了元素数组。

您的原始代码：

function stretch() { 
for (var i=0; i < document.getElementsByClassName('skill-boxes').length; i++) // <-- OUCH 
box[i].style.opacity = "0.3"; 
box[i].style.transform = "scaleY(10)";

来源

2017-10-17 20:50:47 Fenton

只是一个记录 - 缺少开启和关闭大括号 –

感谢@PiotrPasieka - 并在两个循环中！始终使用那些花括号:) https://www.stevefenton.co.uk/2010/05/always-use-those-curly-braces/ – Fenton

你可能也想投票结束作为印刷错误。 – Bergi

JavaScript循环不起作用

回答

相关问题