.click不能用于onclick =“this.classlist.toggle（''）”

Question

我不明白为什么当我点击按钮时，动画不会开始。如果手动点击硬币，它可以正常工作。该按钮连接到一个onclick功能，然后点击硬币开始设置。回应非常感谢。过去4个小时我一直试图解决这个问题并没有取得任何进展。谢谢！

这是小提琴：

https://jsfiddle.net/Studdier/wxedtf0x/16/

function myFunction() {
	document.getElementById("coin").click();
}	

#hero {
  margin-left: 200px;
}

.teamlogo{
padding-left:5%;
}
/* entire container, keeps perspective */
.flip-container{
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
}
/* flip the pane when hovered */
  .flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
}
.flip-container, .front, .back{
width:50px;
height:50px;
}
/* flip speed goes here */
.flipper{
/*transition*/
-webkit-transition:5s;
   -moz-transition:5s;
     -o-transition:5s;
        transition:5s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
position:relative;
}
/* hide back of pane during swap */
.front, .back{
/*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;
position:absolute;
top:0;
left:0;
}
/* front pane, placed above back */
.front{
z-index:2;
}
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
}

<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')" id="transition">
    <div class="front">
      <img src="https://i.imgur.com/VIUd498.png" id="coin">
    </div>

    <div class="back">
      <img src="https://i.imgur.com/OoSnP5t.png" class="inactiveLink">
    </div>
</div>
</div>

<form action="" method="POST">
  <input type="submit" name="tails" value=" button " id = "hero" onclick="myFunction()" />
</form>

Answer 1

只需将输入类型从“提交”更改为“按钮”即可。这将阻止它将表单提交给服务器。

function myFunction() {
	document.getElementById("coin").click();
}	

#hero {
  margin-left: 200px;
}

.teamlogo{
padding-left:5%;
}
/* entire container, keeps perspective */
.flip-container{
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
}
/* flip the pane when hovered */
  .flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
}
.flip-container, .front, .back{
width:50px;
height:50px;
}
/* flip speed goes here */
.flipper{
/*transition*/
-webkit-transition:5s;
   -moz-transition:5s;
     -o-transition:5s;
        transition:5s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
position:relative;
}
/* hide back of pane during swap */
.front, .back{
/*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;
position:absolute;
top:0;
left:0;
}
/* front pane, placed above back */
.front{
z-index:2;
}
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
}

<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')" id="transition">
    <div class="front">
      <img src="https://i.imgur.com/VIUd498.png" id="coin">
    </div>

    <div class="back">
      <img src="https://i.imgur.com/OoSnP5t.png" class="inactiveLink">
    </div>
</div>
</div>

<form action="" method="POST">
  <input type="button" name="tails" value=" button " id = "hero" onclick="myFunction()" />
</form>