Javascript Function to Reveal DIV Container When A Button Is Clicked

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>

Is the script at the end of body, after the rest of the DOM? Or have you missed referencing the script(if it's a separate file) in the HTML document? — Harsha Venkataramu, May 06 '19 at 21:13
Your continue-buttons are links to images. is that by design? — Mouser, May 06 '19 at 21:13
The continue buttons will direct users to other HTML pages with a naming convention of image01, image02, etc. — JSwa, May 08 '19 at 13:42

score 0 · Answer 1 · answered May 06 '19 at 21:54

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>

Javascript Function to Reveal DIV Container When A Button Is Clicked

1 Answers1