javascript - I want to spin the icons currectly on click on corresponding icon -
in html code have tried rotate icon 180 degree on click on corresponding icon , return when click on other icon or outside.the problem here that first icon not return when click on second , second not return either click on first icon or click on outside.i want fix it. how can fix problem?.
function rotate(e){ document.getelementbyid("me").classname="spinner in fa fa-caret-down"; e.stoppropagation(); } function resetrotation(){ document.getelementbyid("me").classname="spinner out fa fa-caret-down"; } document.addeventlistener('click', resetrotation); function rotatea(e){ document.getelementbyid("you").classname="spinner in fa fa-caret-down"; e.stoppropagation(); }
.spinner { transition: 0.5s linear; } .spinner.in{ transform: rotate(180deg); } .spinner.out{ transform: rotate(0deg); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i> <i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>
function rotate(e){ resetrotation(); document.getelementbyid("me").classname="spinner in fa fa-caret-down"; e.stoppropagation(); } function resetrotation(){ document.getelementbyid("me").classname="spinner out fa fa-caret-down"; document.getelementbyid("you").classname="spinner out fa fa-caret-down"; } function rotatea(e){ resetrotation(); document.getelementbyid("you").classname="spinner in fa fa-caret-down"; e.stoppropagation(); } document.addeventlistener('click', resetrotation);
.spinner { transition: 0.5s linear; } .spinner.in{ transform: rotate(180deg); } .spinner.out{ transform: rotate(0deg); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i> <i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>
Comments
Post a Comment