单击按钮时显示DIV容器的Javascript函数

时间：2019-05-06 21:09:39

标签： javascript html css html5

我正在尝试创建一个Javascript函数，该函数将显示div容器eios-response-img，并在用户单击某个响应选项eios-btn-emotion时播放动画GIF。我只有在刷新浏览器后才能正常工作。

我还从Google Inspect中收到以下错误：

  

未捕获的ReferenceError ： EMO（function）未在HTMLButtonElement.onclick上定义。当前设置是否缺少定义语句？ 

function EMO(bg) {

  //Display Emotional Image Response
  var url;
  if (bg == "positive") {
    url = "faces/image01-happy.gif";
    document.getElementById("eios-response-img").style.backgroundImage = "url(" + url + ")";
    document.getElementById("eios-response-img").className += " show animated fadeIn";
  } else if (bg == "negative") {
    url = "faces/image01-happy.gif";
    document.getElementById("eios-response-img").style.backgroundImage = "url(" + url + ")";
    document.getElementById("eios-response-img").className += " show animated fadeIn";
  }

  //Remove Original Image      
  var node;
  if (bg == "positive") {
    document.getElementById("eios-img").className += " hidden animated fadeOut";
    document.getElementById("next-btn-happy").className += " show animated fadeInLeft";
    document.getElementById("button-options-wrapper").className += " hidden animated fadeOut";
  }
  if (bg == "negative") {
    document.getElementById("eios-img").className += " hidden animated fadeOut";
    document.getElementById("next-btn-sad").className += " show animated fadeInLeft";
    document.getElementById("button-options-wrapper").className += " hidden animated fadeOut";
  }

  //Play Audio Respose      
  var audio;
  if (bg == "positive") {
    document.getElementById("happy-sound").play();
  }
  if (bg == "negative") {
    document.getElementById("sad-sound").play();
  }

}
body {
  background-color: #000;
}

img {
  display: block;
}

h1 {
  color: #3a3a3a;
  text-align: center;
  margin-bottom: 3%;
}

figure img.eios-img {
  max-width: 50%;
  margin: 0 auto;
}

#main {
  position: relative;
}

#exit-btn {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: black;
  display: block;
  top: 0;
  left: 0;
}

body,
p,
a,
h1,
h2,
h3,
h4,
h5 {
  font-family: Minecraftia;
}

h5 {
  font-family: Minecraftia;
  font-size: 10px;
  color: #de439a;
  position: absolute;
  text-align: right;
  top: 0;
  right: 3%;
}

.m-header {
  max-width: 100%;
  padding: 30px;
}

figure#intro {
  width: 1004px;
  margin: 0 auto;
}

#start-button {
  background-color: pink;
}

#eios-response-img {
  width: 1004px;
  height: 670px;
  margin: 0 auto;
  display: none;
  background-position: center center;
  background-size: cover;
  position: relative;
}

#next-btn,
#next-btn-happy,
#next-btn-sad {
  position: relative;
  height: auto;
  width: 150px;
  background-color: red;
  right: 0;
  left: 0;
  margin: 0 auto;
  margin-top: 30px;
  display: none;
}

a,
a:visted,
a:active {
  text-decoration: none;
}

h3 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 12px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 5px;
}

.button-options {
  width: 355px;
  margin: 0 auto;
  margin-top: 60px;
}

button.eios-btn-emotion {
  width: 150px;
  background-color: yellow;
  padding: 10px 15px;
  margin-right: 50px;
}

.last {
  margin: 0 !important;
}

.hidden {
  display: none;
}

.show {
  display: block !important;
}

.delay-1s {
  animation-delay: 1s;
}

.delay-1-5s {
  animation-delay: 1.5s;
}

.delay-2s {
  animation-delay: 2s;
}

.delay-2-5s {
  animation-delay: 2.5s;
}

.delay-3s {
  animation-delay: 3s;
}

.delay-3-5s {
  animation-delay: 3.5s;
}
<h1 class="animated fadeInUp">Does This Image Make You Happy?</h1>
<figure id="eios-img" class="animated fadeIn">
  <img class="eios-img" src="images/nuclear-bomb-detonation.jpg" alt="Nuclear Bomb Explosion">
</figure>

<figure id="eios-response-img" class="animated slideInUp">
</figure>

<!-- CHOOSE NEX IMAGE -->
<a href="image02.html">
  <div id="next-btn-happy" class="hidden">
    <h3>Continue</h3>
  </div>
</a>
<a href="image02.html">
  <div id="next-btn-sad" class="hidden">
    <h3>Continue</h3>
  </div>
</a>

<!-- EMOTIONAL CHOICES -->
<div id="button-options-wrapper">

  <div class="button-options">
    <button id="response" class="animated fadeIn delay-3s eios-btn-emotion" name="ch" type="submit" value="positive" onClick="EMO(this.value);">Yes</button>
    <button id="response" class="animated fadeIn delay-3-5s eios-btn-emotion last" name="ch" type="submit" value="negative" onClick="EMO(this.value);">No</button>
  </div>

</div>

<!-- AUDIO CHOICES -->
<audio src="sound/happy-speech.mp3" id="happy-sound" autostart="false" width="0" height="0"></audio>
<audio src="sound/sad-speech.mp3" id="sad-sound" autostart="false" width="0" height="0"></audio>

1 个答案:

答案 0 :(得分：0)

关于404错误，请确保将url的完整路径分配给url变量，以避免出现“找不到文件”类型的错误。关于未捕获的异常，请在调用EMO函数（onDomReady ....）

之前检查文档是否已完全加载。

在摘要中，我用w3schools的马声代替了您的“悲伤声”，只是为了进行实际的尝试。我不确定您是要让“继续”按钮出现在按钮还是位于框中心？当我在添加班级的“显示动画的淡入”（使其变为“显示动画的淡入”）之前删除空格时，该按钮显示在屏幕中间。

希望其中一些帮助！

function EMO(bg) {

  //Display Emotional Image Response
  var url;
  if (bg == "positive") {
    url = "faces/image01-happy.gif";
    document.getElementById("eios-response-img").style.backgroundImage = "url(" + url + ")";
    document.getElementById("eios-response-img").className += "show animated fadeIn";
  } else if (bg == "negative") {
    url = "faces/image01-happy.gif";
    document.getElementById("eios-response-img").style.backgroundImage = "url(" + url + ")";
    document.getElementById("eios-response-img").className += "show animated fadeIn";
  }

  //Remove Original Image      
  var node;
  if (bg == "positive") {
    document.getElementById("eios-img").className += " hidden animated fadeOut";
    document.getElementById("next-btn-happy").className += " show animated fadeInLeft";
    document.getElementById("button-options-wrapper").className += " hidden animated fadeOut";
  }
  if (bg == "negative") {
    document.getElementById("eios-img").className += " hidden animated fadeOut";
    document.getElementById("next-btn-sad").className += " show animated fadeInLeft";
    document.getElementById("button-options-wrapper").className += " hidden animated fadeOut";
  }

  //Play Audio Respose      
  var audio;
  if (bg == "positive") {
    document.getElementById("happy-sound").play();
  }
  if (bg == "negative") {
    document.getElementById("sad-sound").play();
  }

}
body {
  background-color: #000;
}

img {
  display: block;
}

h1 {
  color: #3a3a3a;
  text-align: center;
  margin-bottom: 3%;
}

figure img.eios-img {
  max-width: 50%;
  margin: 0 auto;
}

#main {
  position: relative;
}

#exit-btn {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: black;
  display: block;
  top: 0;
  left: 0;
}

body,
p,
a,
h1,
h2,
h3,
h4,
h5 {
  font-family: Minecraftia;
}

h5 {
  font-family: Minecraftia;
  font-size: 10px;
  color: #de439a;
  position: absolute;
  text-align: right;
  top: 0;
  right: 3%;
}

.m-header {
  max-width: 100%;
  padding: 30px;
}

figure#intro {
  width: 1004px;
  margin: 0 auto;
}

#start-button {
  background-color: pink;
}

#eios-response-img {
  width: 1004px;
  height: 670px;
  margin: 0 auto;
  display: none;
  background-position: center center;
  background-size: cover;
  position: relative;
}

#next-btn,
#next-btn-happy,
#next-btn-sad {
  position: relative;
  height: auto;
  width: 150px;
  background-color: red;
  right: 0;
  left: 0;
  margin: 0 auto;
  margin-top: 30px;
  display: none;
}

a,
a:visted,
a:active {
  text-decoration: none;
}

h3 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 12px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 5px;
}

.button-options {
  width: 355px;
  margin: 0 auto;
  margin-top: 60px;
}

button.eios-btn-emotion {
  width: 150px;
  background-color: yellow;
  padding: 10px 15px;
  margin-right: 50px;
}

.last {
  margin: 0 !important;
}

.hidden {
  display: none;
}

.show {
  display: block !important;
}

.delay-1s {
  animation-delay: 1s;
}

.delay-1-5s {
  animation-delay: 1.5s;
}

.delay-2s {
  animation-delay: 2s;
}

.delay-2-5s {
  animation-delay: 2.5s;
}

.delay-3s {
  animation-delay: 3s;
}

.delay-3-5s {
  animation-delay: 3.5s;
}
<h1 class="animated fadeInUp">Does This Image Make You Happy?</h1>
<figure id="eios-img" class="animated fadeIn">
  <img class="eios-img" src="images/nuclear-bomb-detonation.jpg" alt="Nuclear Bomb Explosion">
</figure>

<figure id="eios-response-img" class="animated slideInUp">
</figure>

<!-- CHOOSE NEX IMAGE -->
<a href="#">
  <div id="next-btn-happy" class="hidden">
    <h3>Continue</h3>
  </div>
</a>
<a href="#">
  <div id="next-btn-sad" class="hidden">
    <h3>Continue</h3>
  </div>
</a>

<!-- EMOTIONAL CHOICES -->
<div id="button-options-wrapper">

  <div class="button-options">
    <button id="response" class="animated fadeIn delay-3s eios-btn-emotion" name="ch" type="submit" value="positive" onClick="EMO(this.value);">Yes</button>
    <button id="response" class="animated fadeIn delay-3-5s eios-btn-emotion last" name="ch" type="submit" value="negative" onClick="EMO(this.value);">No</button>
  </div>

</div>

<!-- AUDIO CHOICES -->
<audio src="sound/happy-speech.mp3" id="happy-sound" autostart="false" width="0" height="0"></audio>
<audio src="https://www.w3schools.com/tags/horse.ogg" id="sad-sound" autostart="false" width="0" height="0"></audio>

相关问题
最新问题