追加イベントリスナーのエラー

var x = document.getElementsByClassName("box"); 
 

 
// Code for Chrome, Safari and Opera 
 

 
x.addEventListener("webkitAnimationEnd", function(){ 
 
    console.log("event has ended"); 
 
}); 
 

 
// Standard syntax 
 

 
x.addEventListener("animationend", function(){ 
 
    console.log("event has ended"); 
 
});

.box { 
 
    background: red; 
 
    position: absolute; 
 
    padding: 100px; 
 
} 
 

 
.box:hover { 
 
    animation-name: rotate; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes rotate { 
 
    from {transform: rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
}

<html> 
 
\t 
 
\t <body> 
 
\t 
 
\t <div class="box"> 
 
\t </div> 
 

 
    
 
\t </body> 
 
</html>

私はイムは、アニメーションが終了したことをコンソールログにメッセージを表示しようとしているが、それは表示されない、CSSアニメーションでJSを使用しようとしているが、それは私を与えますこのエラー：x.addEventListenerがここに機能ではありませんが、私のコードです：

出典

2017-04-05 stephjhonny

'**だ**' HTMLCollection'すなわち多くの要素を返すByClassName' **です。あなたはそれを反復し、すべての要素にリスナーを追加する必要があります。 –

また、[querySelectorAll'、 'getElementsByClassName'と他の' getElementsBy * 'メソッドは何を返すのですか？]（http://stackoverflow.com/q/10693845/4642212）。 – Xufox

は、次のようにインデックスを使用してみてください：

var x = document.getElementsByClassName("box")[0]; 
 

 
// Code for Chrome, Safari and Opera 
 

 
x.addEventListener("webkitAnimationEnd", function(){ 
 
    console.log("event has ended"); 
 
}); 
 

 
// Standard syntax 
 

 
x.addEventListener("animationend", function(){ 
 
    console.log("event has ended"); 
 
});

.box { 
 
    background: red; 
 
    position: absolute; 
 
    padding: 100px; 
 
} 
 

 
.box:hover { 
 
    animation-name: rotate; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes rotate { 
 
    from {transform: rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
}

<html> 
 
\t 
 
\t <body> 
 
\t 
 
\t <div class="box"> 
 
\t </div> 
 

 
    
 
\t </body> 
 
</html>

出典

2017-04-05 08:32:24 Mamun

同じクラス名の要素が複数ある場合はどうなりますか？ –

@Dan Philip、今は1つの要素しかありません。複数の要素があることを確実に伝えることはできません。要素が1つしかなく、ループを使用している場合、それはあなた次第です。 – Mamun

クラスを使用して選択するときは、すべての要素を反復処理してイベントをバインドする必要があります。 getElement

var x = document.getElementsByClassName("box"); 
 
// Code for Chrome, Safari and Opera 
 
for (var i = 0; i < x.length; i++) { 
 

 
    x[i].addEventListener("webkitAnimationEnd", function() { 
 
    console.log("event has ended"); 
 
    }); 
 

 
    // Standard syntax 
 

 
    x[i].addEventListener("animationend", function() { 
 
    console.log("event has ended"); 
 
    }); 
 

 
}

.box { 
 
    background: red; 
 
    position: absolute; 
 
    padding: 100px; 
 
} 
 

 
.box:hover { 
 
    animation-name: rotate; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes rotate { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<html> 
 

 
<body> 
 

 
    <div class="box"></div> 
 

 
</body> 
 

 
</html>

出典

2017-04-05 08:37:42

追加イベントリスナーのエラー

答えて

関連する問題