Object rotate click JS

Question

I have a problem, I don't know why but the script doesn't work. When I click in object he must only turn right. Turn right 90 degress.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Awesome</title>
    <link rel="stylesheet" href="style2.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        $('.crossRotate').on('click', function () {
            $(this).toggleClass('active');
        });
    </script>

    <style>
        object {
            width: 10%;
            height: 10%;
        }

        .crossRotate {
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;
            transition-duration: 3s;
        }

        .crossRotate.active {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }

        body {
            background-color: black;
        }
    </style>
</head>
<body>
<object data="https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg"></object>
</body>
</html>

You should use two script tags and not src and content on one tag https://stackoverflow.com/questions/6528325/what-does-a-script-tag-with-src-and-content-mean — Michiel, May 14 '18 at 12:40

score 0 · Answer 1 · answered May 13 '18 at 23:23

You are loading $('.crossRotate').on(' before the page has loaded, so it will never hit and you don't wrap it in a <script> block. Either load the JS at the bottom of the page, or wrap it in onload. Try:

<script>
    $(function(
        $('.crossRotate').on('click', function(){
          $(this).toggleClass('active');
        });
    ));
</script>

Object rotate click JS

1 Answers1