CODEWITHSUNDEEP
javascripthtmlcssdom
pokemon man
pokemon man

Reputation: 27

style.animationDuration isn't working for javascript. trying to add a css attribute using javascript

I'm really stuck

for some reason, whenever I use the style.animatonDuration code to add a css attribute to what of my div tags, it doesn't work. I want to make the square have a duration of five seconds and move to the left.

Here is my javascript code

function Action(){
console.log("hello");
var age;
var name;
var time;
var have
age=document.getElementById("flo").value;
name=document.getElementById("coo").value;
time=document.getElementById("yo").value;
var danimation=document.querySelector("#yos");


var ac=0;
var a=0;
var b=0;
var c=0;
var d=0;


    if (isNaN(age))
    {

    a=1;

    }
    else
    {
    if (age<18)
    {



    b=1;
    ac=1;
    }


}




 if (isNaN(time))
 {
 c=1;



 }
 else {
    if (time>10 || time<1)
        d=1;



}


    if (a==1 && c==1){


    alert("Both variables for time and age are not numbers.  Please enter in a number");


}

else if (a==1 || c==1)
{
    alert("Please check your time and age input to see if they are both numbers!");


}

else {
        if (ac==1 && d==1)
        {
            alert("Not only are you not old enough, but you choose wrong time variables");

        }

        else if (ac==1)
            alert("You are not old enough");

        else if (d==1)
            alert("Please enter a number between 1 and 10");

    }





 if (a==0 && b==0 && c==0 && d==0)
{

console.log("Alright, this is correct");
document.getElementById("results").innerHTML="Alright  "+name+ ", this will 
run for "+time + " seconds";

(here is the problem.  I'm trying to add a css property that animations the yos div tag.  It works with someone like danimation.style.backgroundColor but it doesn't work for this one.)    
danimation.style.animationDuration="5s";
danimation.style.height="100px";
 }




   }

Here is my css code

#yos{

border-style:solid;
top:80%;
height: 50px;
width: 50px;
position: absolute;
animation name: example




  }


  @keyframes example{
0% {left: 0px;}
70%  {left: 200px;}


  }


  h1{

text-align: center;


}
 #identify{

text-align:center;
}


.container{

border-style: dotted;
width: 800px;
height: 400px;
position: absolute;
right: 550px;

}

.ind{
float:left;

position:relative;
top: 20%;
padding: 40px;
left:200px;
width: 60px;

}

 .ident{
 position:relative;
 display:inline;
 float: left;
 text-align:center;

 padding: 10px;

 }
 #one.ind{

  background-color:yellow;
  }
  #two.ind{
  background-color:blue;


 }

 #three.ind{
background-color:red;
 }
form {


position: absolute;
top: 60%;
right: 120px;

 }
button{

 position: absolute;
 top: 70%;
 right: 45%;

 }

 #results {
 top: 60%;
 right:50%;
position: absolute;

}

Here is my html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="project" content="hello">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="2css.css">
<h1>Set the distance!</h1>
<p id="identify">To play this game, you must be at least 18 years old.  You 
must also fill out some information.</p>

<div class="container">
<div class="ind" id="one"><p id="mee">Name</p></div>
<div class="ind" id="two"><p id="metoo">Age</p></div>
<div class="ind" id="three" ><p id="methree">Time(seconds)</p></div>

<form>
<input type="textbox" id="coo" class="texts">
<input type="textbox" id="flo" class="texts">
<input type="textbox" id="yo" class="texts">

</form>


<button onclick="Action();">Click to calculate</button>

</div>
<script type="text/javascript" src="Application.js"></script>
<p id="results" value="yo">Hey</p>

<div id="yos">
</div>

I'm trying to make the div tag with the id of yos move to the right for about 5 seconds. It works when I do something like style.backgroundcolor="blue". But it doesn't work for animation. Anyone know why that is?

Upvotes: 2

Views: 359

Answers (2)

Ronald
Ronald

Reputation: 417

the value of animationDuration is not a number, but should include the unit. So valid values could be: 1s 2s 100ms 500ms

Upvotes: 0

Dipak
Dipak

Reputation: 21

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:0%;}
  100% {left:100%;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:0%;}
  100% {left:100%;}
}

Upvotes: 1

Related Questions