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

Question

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

我也从Google Inspect收到以下错误：

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

 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> 

Answer 1

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

在片段中，我用w3schools马声音替换了你的“悲伤声音”，只是为了进行真实的试听。 我不确定你是否想要“继续”按钮出现在按钮上或框架中心内？ 当我在“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>