Javascript: using one function on multiple elements

Question

I'm new to JavaScript and I'm having trouble figuring out how to resize multiple elements with one function for my rhythm game. This is for my CSP class and theres no use of jQuery sadly. I'm also limited to the commands that the program (AppLab) I'm using has provided. My goal right now is to make an "animation" of a circle growing to its desired size to indicate that it should be clicked. I need these elements to appear while another one is in the process growing and so on.

I'm aware that my code probably sucks so if there is also a way to simplify or improve it I would love to know.

This is my current program code and the hitIndicator function is the one I'm having the most trouble with:

var circleSizeW = 0;
var circleSizeL = 0;
var score = 0;

hitCircle("hitcircle", 300, 6, 206);
hitCircle("image2", 300, 6, 682);

function circleEffects(circleid, whentohit) {
  setTimeout(function() {
  onEvent(circleid, "click", function() {
  playSound("47 (1).mp3", false);
  hideElement(circleid);
});  
}, whentohit);
}


function hitIndicator(circleid, growthRate) {
  var xPos = getXPosition(circleid);
  var yPos = getYPosition(circleid);
    var t = setInterval(function() {
      circleSizeW = circleSizeW + growthRate;
      circleSizeL = circleSizeL + growthRate;
      xPos = xPos - (growthRate/2);
      yPos = yPos - (growthRate/2);
      showElement(circleid);
      setSize(circleid, circleSizeW, circleSizeL);
      setPosition(circleid, xPos, yPos);
    if (circleSizeW >= 60) {
      clearInterval(t);
      circleSizeW = 0;
      circleSizeL = 0;
    }
    }, 50);
  }

function scoreSystem(circleid, whentohit) {
  setTimeout(function() {
      onEvent(circleid, "click", function() {
      score = score + 100; 
      setText("scoreTrack", score);
    });
  }, whentohit);
}

function hitCircle(circleid, whentohit, growthRate, appearancetime) {
setTimeout(function() {
  console.log("hitcircle");
circleEffects(circleid, whentohit);
hitIndicator(circleid, growthRate);
scoreSystem(circleid, whentohit);
}, appearancetime);

My code is nowhere near completion either so there are still many things that needs to be done. I'm not sure how to have multiple circles running that function at similar times because when I try to fix the errors/change the values of the functions' parameters they sometimes loop twice, infinitely loop, or receive the changed values of the previous circle while the previous circle is still growing.

Answer 1

I am also fairly new with Javascript, but I have a fairly good idea of what should be done here.

1. I would write an object constructor for instantiating circles . Scroll down this page to see how to make object constructors.

2. Then for your circle object add a hitindicator method . This page covers methods.

3. Then set up a function that will retrieve and loop through every instantiated circle object and run .hitindicator on each circle . Best way to do this, might be to add every instantiated circle to a circle array, then just loop through the array?

4. Then have an update() function that calls the function in step 3 , and have update() called every "frame" with setInterval.

The pages linked should give you enough information to figure it out from here.