Animate Body Background

I must be calling the syntax wrong… on either line 6
var boddy = $('body');
or line 25
$('body').animate({backgroundColor: red}, 1000 );
or even
boddy.animate({backgroundColor: red}, 1000 );
I am loading jquey and jqueryUI in the CodePen,
am I missing something else?

var c = 0;
var simon_sSequence = [];
var player_sInput = [];
const playerInput = document.getElementById("player_sInput");
const pads = document.querySelectorAll(".padz");
var boddy = $('body');
// Convert the pad list to an array so that
// we can iterate over it using .forEach()
Array.from(pads).forEach((pad, index) => {
  // Get the associated audio element nested
  // in the pad-div
  const audio = pad.querySelector("audio");

  // Add a click listener to each pad which
  // will play the audio, push the index to
  // the user input array, and update the span

  pad.addEventListener("click", () => {

    if (player_sInput[c] !== simon_sSequence[c]) {
      $('body').animate({backgroundColor: red}, 1000 );
    } else {
      //end of if;

      playerInput.textContent = "Player's reply " + player_sInput;
    } //end of else
  }); //end of EventListener
}); //end of Array.from(pads).forEach((pad, index)

function audioBlack() {
  //generate a random number
  //push random number to simon_sSequence
  simon_sSequence.push(Math.floor(Math.random() * 4)); //floor or four?
  $("#simon_sSequence").text("Simon says " + simon_sSequence);
  //  $("#player_sInput").text("Player's reply " +player_sInput);
  //for each in the array set time interval(300ms);
  //dipslay hover effect
  //play pad sound
  var audio = document.getElementById("audioBlue");;
  //clear player's input for this turn
  player_sInput = [];
  c = 0;

When you say you want to animate the body background, what are you expecting to happen? As in, visually, what would the user see?

I thought it would at least turn from grey to red… and then the next step I was going to let it fade back to grey. It’s showing the ‘wrong’ in the console log right below, so I know it’s reading it…

mainly I was missing jquery.Color… and then,

    if (player_sInput[c] !== simon_sSequence[c]) {
          backgroundColor: "red"
          backgroundColor: "gray"
      console.log("wrong");; //;   // stuck here
          background: grey
    } else {

Still stuck on the audio

Where is audioError defined?

line 18 in the javascript…
var audioError = document.querySelector("audioE"); // stuck here

There’s no audioE element… how does the corresponding markup look like?

Sorry, I thought I posted the HTML, it’s on line 41, almost the very bottom, just before the closing body tag.

  <div id="container">
    <div id="green" class="pad padz">
      <!-- The classes padz (4) are used in the HTML but not found in any stylesheet. -->
      <audio preload="auto" id="audioGreen" src="" />
    <!-- upper left -->

    <div id="red" class="pad padz">
      <audio preload="auto" id="audioRed" src="" />
    <!-- upper right -->

    <div id="yellow" class="pad padz">
      <audio preload="auto" id="audioYellow" src="" />
    <!-- lower left -->

    <div id="blue" class="pad padz">
      <audio preload="auto" id="audioBlue" src="" />
    <!-- lower right -->

    <div id="startTapper" class="pad" onclick="audioBlack()">
      <!-- An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead. -->
      <!-- convert to an event handler -->
        <span id="simon_sSequence">Shall we</span>
        <span class="spacer"></span>
        <span id="player_sInput">play a game?</span>
      <!-- end of "display" -->
    <!-- end of "startTapper" -->
  <!-- end of "container" -->
      <audio preload="auto" id="audioE" src="" />

Ah okay. Well document.querySelector("audioE") queries for an element with the tag name audioE – for the ID, use #audioE (just like CSS selectors).

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.