Help with a small Javascript project

JavaScript
1

Hey everyone. I followed an online tutorial for creating a simple music maker in javascript. The problem is, I can’t figure out why mine isn’t working. The HTML and CSS work just fine, but the JS just won’t run. I keep getting undefined errors, but the guy in the tutorial never did.
Here is my code.
Please tell me if you see anything wrong with it.

window.addEventListener("load", () => {
    const sounds = document.querySelectorAll
    (".sounds");
    const pads = document.querySelectorAll
    (".pads div");
    const visual = document.querySelector
    (".visual");
    const colors = [
        "#0f7f0f",
        "#ffc0cb",
        "#ff0000",
        "#adff2f",
        "#8a2be2",
        "#ffff00"
     ];
     pads.forEach((pad, index) => {
    pad.addEventListener("click", function() {
      sounds[index].currentTime = 0;
      sounds[index].play();
      createBubble(index);
    });
  });

  const createBubble = index => {
    //Create bubbles
    const bubble = document.createElement("div");
    visual.appendChild(bubble);
    bubble.style.backgroundColor = colors[index];
    bubble.style.animation = `jump 1s ease`;
    bubble.addEventListener("animationend", function() {
      visual.removeChild(this);
    });
  };
});

Thank you for your time.

2

Ignore the `, I added it because I thought that’s what free code camp wanted with formatting.

3

Without seeing all of the code it will be hard to help. Put the full code online, you can make a Codepen or put it on GitHub.

  1. Normally I would say it’s just the forum, but in some places, you do have the correct quotes so I’m not sure. You should use double " or single ' quotes.

  2. Pretty sure the animation property value has to be a string.

bubble.style.animation = "jump 1s ease";

Here is your code formatted and with the quotes and animation property fixed:

window.addEventListener('load', () => {
  const sounds = document.querySelectorAll('.sounds');
  const pads = document.querySelectorAll('.pads div');
  const visual = document.querySelector('.visual');
  const colors = [
    '#0f7f0f',
    '#ffc0cb',
    '#ff0000',
    '#adff2f',
    '#8a2be2',
    '#ffff00'
  ];
  pads.forEach((pad, index) => {
    pad.addEventListener('click', function() {
      sounds[index].currentTime = 0;
      sounds[index].play();
      createBubble(index);
    });
  });

  const createBubble = index => {
    //Create bubbles
    const bubble = document.createElement('div');
    visual.appendChild(bubble);
    bubble.style.backgroundColor = colors[index];
    bubble.style.animation = 'jump 1s ease';
    bubble.addEventListener('animationend', function() {
      visual.removeChild(this);
    });
  };
});
4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like