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

Question

I am trying to create a Javascript function that will reveal a div container eios-response-img and play an animated GIF when the user clicks on a certain response option eios-btn-emotion . I can only get it working when the browser is refreshed.

I am also getting the following error from 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> 

Answer 1

With regard to the 404 error, ensure you assign the full path of your url to your url variable to avoid these "file not found" type errors. Regarding the Uncaught Exception, check that the document is fully loaded before calling the EMO function ( onDomReady .... )

In the snippet I replaced your "sad sound" with a w3schools horse sound, just for a realistic try-out. I wasn't sure whether you wanted the 'continue ' button to appear at the button or within the center of the frame? When I deleted the space before " show animated fadeIn" (to make it "show animated fadeIn") where you add classes, the button displays mid-screen.

Hope some of this helps!

 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>