Reputation: 123

Starting an animation onclick

I have this button where when the user clicks on it an animation starts. However, when I press on the button nothing happens. What should happen is: when the user presses the button a path called "PathTarget" spins. Can someone tell me why this isn't working? Thank You. I am using Javascript in order for this animation to happen.

body{
    background-color: #EEE2DC;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid black;
  background-color: #EEE2DC;
}

li {
  float: left;
}

li a {
  display: block;
  color: #163C68;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a.active {
  color: white;
  background-color: #163C68;
}

#Sim1{
    padding-left: 200px;
    font-size: 30px;
    
}

#Sim2{
    padding-left: 200px;
    font-size: 30px;
    
}

#Sim3{
    padding-left: 200px;
    font-size: 30px;
}

#Home{
    font-size: 30px;
    padding-left: 120px;
}

#Title{
    font-size: 50px;
    padding-left: 570px;
        
}

#P2{
    position: absolute;
    right: 1000px;
    top: 400px;
}

#Changecolourbtn{
    background-color: #163C68;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    left: 335px;
    top: 600px;
}

.animate{
     transform-origin: 50%;
    animation: spin 4s linear;
    animation-fill-mode: forwards;
}

@keyframes spin {
  50% {
  -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Meter Dashboard Animation">
        <link rel="stylesheet" href="Simulation2.css">
    </head>
    
    <body>
       <ul>
           <li><a id="Home" href="index.html">Home</a></li>
           <li><a id="Sim1" href="Simulation1.html">Simulation 1</a></li>
           <li><a id="Sim2" href="Simulation2.html">Simulation 2</a></li>
           <li><a id="Sim3" href="Simulation3.html">Simulation 3</a></li>
        </ul>
        <h1 id="Title">Simulation 2</h1>
        
        <svg id="P2" xmlns="http://www.w3.org/2000/svg" width="227" height="191">
                <path id="ChangeColour" fill="#FFF" d="M183.551 184.932c.04-.03.07-.06.1-.09a99.653 99.653 0 006.79-7.295 94.22 94.22 0 004.021-5.08c13-17.463 20.709-39.29 20.709-62.956 0-11.987-1.979-23.497-5.619-34.212a7.693 7.693 0 00-.21-.596 100.202 100.202 0 00-3.19-8.121c-.09-.22-.189-.438-.289-.656-13.201-29.292-39.311-51.199-70.83-58.047a98.777 98.777 0 00-21.061-2.256c-19.01 0-36.79 5.377-51.98 14.74a98.081 98.081 0 00-5.17 3.409c-.21.139-.42.288-.63.447l-.09.06c-12.62 9.044-23.14 20.972-30.63 34.849a98.712 98.712 0 00-4.35 9.034c-5.37 12.673-8.34 26.657-8.34 41.349 0 26.647 9.78 50.949 25.85 69.337a97.712 97.712 0 007.2 7.455l137.719-1.371z"/>
            
                <path id="PathTarget" fill="#B4B5B5" stroke="#686868" stroke-width="2" stroke-miterlimit="10" d="M135.309 43.131l-23.053 57.655 13.404 2.673z"/>
                <path fill="none" d="M37.198 72.523h28.333v10.666H37.198z"/>
                <text transform="translate(37.198 81.043)" font-family="'MyriadPro-Regular'" font-size="12">
                    1000
                </text>
                <path fill="none" d="M100.807 25.37h28.333v10.666h-28.333z"/>
                <text transform="translate(100.808 33.89)" font-family="'MyriadPro-Regular'" font-size="12">
                    2000
                </text>
                <path fill="none" d="M167.199 77.856h28.334v10.666h-28.334z"/>
                <text transform="translate(167.2 86.376)" font-family="'MyriadPro-Regular'" font-size="12">
                    3000
                </text>
                <path fill="none" d="M153.365 155.189h28.334v10.666h-28.334z"/>
                <text transform="translate(153.365 163.709)" font-family="'MyriadPro-Regular'" font-size="12">
                    4000
                </text>
                <path fill="none" d="M56.755 155.189h7.049v8.641h-7.049z"/>
                <text transform="translate(56.755 163.709)" font-family="'MyriadPro-Regular'" font-size="12">
                    0
                </text>
                <path fill="none" d="M55.181 176.983l-9.35 9.32M183.551 184.923h-.01l-10.631-11.55"/>
                <g>
                    <circle fill="#B4B5B5" stroke="#686868" stroke-width="2" stroke-miterlimit="10" cx="114.975" cy="108.947" r="20.334"/>
                </g>
                <g>
                    <path fill="#FFF" stroke="#000" stroke-miterlimit="10" d="M-169.77-201.86v.02l-.01-.01c0-.01.01-.01.01-.01z"/>
                    <path fill="none" stroke="#000" stroke-miterlimit="10" d="M-169.77-201.84l-.01-.01-.58-.99-.28-.47"/>
                    <path fill="#F9EC53" d="M57.45 22.4l4.556 6.628C34.8 46.456 16.903 76.032 16.903 109.582c0 24.81 9.777 47.437 25.887 64.583l-4.609 5.14C20.244 160.74 9.303 135.971 9.303 108.768c0-35.923 19.091-67.612 48.147-86.368z"/>
                    <path fill="none" d="M-259.1-84.38L-285.19-111"/>
                    <path fill="#21B0E3" d="M209.055 64.952l-7.32 2.279c-15.65-32.182-48.65-54.361-86.84-54.361-19.93 0-38.45 6.04-53.83 16.4l-4.31-6.59c16.58-11.26 36.6-17.84 58.169-17.84 41.689.001 77.65 24.61 94.131 60.112z"/>
                    <path fill="#75C049" d="M217.697 106.994c0 27.141-10.42 51.841-27.5 70.311l-4.369-5.12c15.309-17.07 24.619-39.64 24.619-64.38 0-11.43-1.99-22.41-5.641- 32.58l7.291-1.93c3.63 10.569 5.6 21.89 5.6 33.699z"/>
                </g>
                <g fill="#7B7D7D">
                    <path d="M190.984 178.166l-7.332 6.667-8.334-9V168.5h7.834zM208.961 64.277l3.352 9.329-11.508 4.25-6.774-2.807 2.998-7.236zM46.055 185.443l-7.142-6.872 8.424-8.916 7.316-.489.523 7.816zM18.965 66.334l4.026-9.055 11.253 4.882 2.954 6.712-7.172 3.155zM110.643 4.698l9.902.426-.416 12.26-5.162 5.208-5.565-5.515z"/>
                </g>
            </svg>
        
        <button id="Changecolourbtn" onclick="ChangeColour.style.fill='orange';">Change Colour</button>
        <button id="StartAnimation" onclick="DoAnimation()">Start Animation</button>
        <script>
            function DoAnimation(){
                var targetElement = document.getElementById("#PathTarget");
                targetElement.className = "animate";
            }   
        </script>

    </body>

Upvotes: 3

Answers (1)

Tim Wilson

Reputation: 169

ID is already assumed when calling "getElementByID"

        <script>
            function DoAnimation(){
                var targetElement = document.getElementById("PathTarget");
                targetElement.class = "animate";
            }   
        </script>

Upvotes: 2

Starting an animation onclick

Answers (1)

Related Questions