Show alert message

Question

This is a game where the score keeps increasing but nothing shows up so, I want to add an alert message that shows that you won after scoring 5 points. How can I do that?

cycleColor = function() {
    ++curColor;
    if (curColor == colors.length) {
      curColor = 0;
    }
    jello.className = "jello " + colors[curColor];
  },
  checkColorMatch = function() {
    if (curColor == nextMatchColor) {
      ++streak;
      dur -= 10;
      if (dur < minDur) {
        dur = minDur;

      }
      streakCounter.innerHTML = streak;
    } else {
      streak = 0;
      dur = 2000;
      streakCounter.innerHTML = "";
    }

    prevMatchColor = nextMatchColor;
    nextMatchColor = chooseColor();

    boxes[0].className = "box " + colors[prevMatchColor];
    boxes[1].className = "box " + colors[nextMatchColor];

    rerun();
    setTimeout(checkColorMatch, dur);
  };

main.classList.add("run");
jello.classList.add(colors[curColor]);
boxes[0].classList.add(colors[prevMatchColor]);
boxes[1].classList.add(colors[nextMatchColor]);

for (b in boxes) {
  if (b < boxes.length) {
    boxes[b].classList.add(colors[chooseColor()]);
  }
}

Answer 1

well i would change this function like:

 checkColorMatch = function() {
if (curColor == nextMatchColor) {
  ++streak;
  dur -= 10;
  if (dur < minDur) {
    dur = minDur;

  }
  streakCounter.innerHTML = streak;
     if (streak=="5"){
   alert("You won!");
    }

} else {
  streak = 0;
  dur = 2000;
  streakCounter.innerHTML = "";
}

prevMatchColor = nextMatchColor;
nextMatchColor = chooseColor();

boxes[0].className = "box " + colors[prevMatchColor];
boxes[1].className = "box " + colors[nextMatchColor];

rerun();
setTimeout(checkColorMatch, dur);
  };

now if you need it to alert every 5 points, then you need to loop a counter for every 5 points. like so:

   checkColorMatch = function() {
if (curColor == nextMatchColor) {
  ++streak;
  ++score5;
  dur -= 10;
  if (dur < minDur) {
    dur = minDur;

  }
  streakCounter.innerHTML = streak;
     if (score5=="5"){
   alert("You won! 5 points");
    score5=0;
    }

} else {
  streak = 0;
  dur = 2000;
  score5=0;
  streakCounter.innerHTML = "";
}

prevMatchColor = nextMatchColor;
nextMatchColor = chooseColor();

boxes[0].className = "box " + colors[prevMatchColor];
boxes[1].className = "box " + colors[nextMatchColor];

rerun();
setTimeout(checkColorMatch, dur);
};

but I do question your use of the innerhtml function as for compatibility. Maybe it needs to be

       document.getElementById("streakCounter.").innerHTML

instead of

        streakCounter.innerHTML

Answer 2

If all you need is a simple pop up message, just use the alert() method.

alert("You won!");

EDIT:
Replace ++streak; with something like this:

    if(++streak === 5){
        alert("You won!");
        //whatever other things you need to do when the player wins
        return;
    }