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

标签 javascript css html

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

我还从 Google Inspect 收到以下错误:

Uncaught ReferenceError: EMO(function) is not defined at HTMLButtonElement.onclick. Is the current setup missing the defining statement?

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>

最佳答案

关于 404 错误，请确保将 url 的完整路径分配给 url 变量，以避免这些“找不到文件”类型的错误。关于Uncaught Exception，调用EMO函数前检查文档是否完全加载(onDomReady ....)

在片段中，我用 w3schools 马的声音替换了你的“悲伤的声音”，只是为了进行真实的尝试。我不确定您是希望“继续”按钮出现在按钮上还是框架中央？当我删除添加类的“show animated fadeIn”之前的空间(使其成为“show animated fadeIn”)时，按钮显示在屏幕中间。

希望这对您有所帮助!

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>

关于单击按钮时显示 DIV 容器的 Javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56012482/

上一篇：javascript - Bootstrap 4 - 响应式导航栏不折叠

下一篇：html - :table-cell determined的padding是怎么显示的

相关文章：

css - 最高效的 CSS 选择器 : Header Tag, 类还是 ID？

html - 无法将提交按钮放在底部。它在旁边，通过评论框而不是下面的评论框

html - 如何对齐底部 block ？

javascript - 带子组件的 Vue 组件

javascript - 将范围绑定(bind)到 forEach 循环中的项目

javascript - 目标刷新 iframe

javascript - 我的导航中有一个嵌套的 ul，为什么它不显示移动列表中的所有内容？

javascript - 导航项 100% 分布在一个 div 中，填充均匀

javascript - 使用 td 属性计算产品总和

html - 带有滚动条问题的多级下拉菜单

©2024 IT工具网  联系我们