Nill Posted July 2, 2017 Share Posted July 2, 2017 Hello, I need help. I am beginner.<!DOCTYPE html> <html lang="lt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> button{ position: relative; top: 26px; width:30px; background-color:#ffffff; border:none; } button i i{ display: inline-block; width: 2px; height: 20px; background:#00B875; animation: mymove 1.2s infinite; } .play1 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);} .play2 {animation-timing-function: cubic-bezier(0.42,0,1,1);} .play3 {animation-timing-function: cubic-bezier(0,0,0.58,1);} .play4 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);} .play5 {animation-timing-function: cubic-bezier(0,0,0.58,1);} @keyframes mymove { from {height: 6px;} to {height: 12px;} } .pause1 {animation-timing-function: step-end;} .pause2 {animation-timing-function: step-end;} .pause3 {animation-timing-function: step-end;} .pause4 {animation-timing-function: step-end;} .pause5 {animation-timing-function: step-end;} </style> </head> <body> <button onclick="myFunction()"> <i id = 1 class="play"> <i class="play1"></i> <i class="play2"></i> <i class="play3"></i> <i class="play4"></i> <i class="play5"></i> </i> <i id = 2 class="pause"> <i class="pause1"></i> <i class="pause2"></i> <i class="pause3"></i> <i class="pause4"></i> <i class="pause5"></i> </i> </div> </button> <script> var myVideo = document.getElementById("9"); var isPlaying = false; function myFunction(){ if (isPlaying) { myVideo.pause(); document.getElementById("1").style.opacity = "0"; } else { myVideo.play(); document.getElementById("2").style.opacity = "0"; } }; myVideo.onplaying = function() { isPlaying = true; }; myVideo.onpause = function() { isPlaying = false; }; </script> </body> </html> There are two buttons here, it's not good. Thank you. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 3, 2017 Share Posted July 3, 2017 What are you trying to do with all of those i elements inside a button element? If you look at your developer tools you'll notice an error message because you're trying to get an element with an ID that doesn't exist. Link to comment Share on other sites More sharing options...
Nill Posted July 5, 2017 Author Share Posted July 5, 2017 Thanks, I have already solved it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now