Функция Javascript для выявления контейнера DIV при нажатии кнопки - PullRequest
Новая
       3

Функция Javascript для выявления контейнера DIV при нажатии кнопки

0 голосов
/ 07 мая 2019

Я пытаюсь создать функцию Javascript, которая будет отображать контейнер div eios-response-img и воспроизводить анимированный GIF, когда пользователь нажимает на определенный вариант ответа eios-btn-emotion.Я могу заставить его работать только при обновлении браузера.

Я также получаю следующую ошибку от Google Inspect:

Uncaught ReferenceError : EMO (функция) не определена в 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 голосов
/ 07 мая 2019

Что касается ошибки 404, убедитесь, что вы присваиваете полный путь вашего URL переменной url, чтобы избежать ошибок типа «файл не найден». Что касается исключения Uncaught, убедитесь, что документ полностью загружен, прежде чем вызывать функцию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...