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循環不起作用

回答

相關問題