Javascript incorrect display problem with for-loop

January 26, 2024

I’m new to JavaScript. Now I’m trying to write code that displays hearts based on numbers. Everything came out looking good. But there are some that are displayed incorrectly, namely the number 500. It is displayed as 💝🧡 But 600 it is displayed as 💝 And it happened to 5000 and 6000 too, I can’t find a solution right now.

The Code:

function numbertoheart(r) {
  if (r <= 0) return "";
  for (var o = "", f = 0; f < Math.floor(r / 100000); f++) o += "💟";
  for (var $ = r % 100000, f = 0; f < Math.floor($ / 50000); f++) o += "💖";
  for (var $ = r % 50000, f = 0; f < Math.floor($ / 10000); f++) o += "💗";
  for (var $ = r % 10000, f = 0; f < Math.floor($ / 5000); f++) o += "💓";
  for (var $ = r % 5000, f = 0; f < Math.floor($ / 2000); f++) o += "❣";
  for (var $ = r % 2000, f = 0; f < Math.floor($ / 1000); f++) o += "💕";
  for (var $ = r % 1000, f = 0; f < Math.floor($ / 500); f++) o += "💝";
  for (var $ = r % 500, f = 0; f < Math.floor($ / 200); f++) o += "💚";
  for (var $ = r % 200, f = 0; f < Math.floor($ / 100); f++) o += "🧡";
  for (var $ = r % 100, f = 0; f < Math.floor($ / 50); f++) o += "💜";
  for (var $ = r % 50, f = 0; f < Math.floor($ / 10); f++) o += "💙";
  for (var $ = r % 10, f = 0; f < Math.floor($ / 5); f++) o += "💛";
  for (var $ = r % 5, f = 0; f < $; f++) o += "❤";
  return o
}

console.log(numbertoheart(500));
console.log(numbertoheart(600));
console.log(numbertoheart(5000));
console.log(numbertoheart(6000));

Thank you in advance.

I want it to display correctly. It is similar to the rank system based on the number of points.

>Solution :

The issue with your code is that it processes the input number in multiple cases when it matches multiple conditions. To fix this, you should subtract the hearts added in each case from the original number to make sure it’s only processed once.

Fixed Code:

function numbertoheart(r) {
  if (r <= 0) return "";
  var o = "";
  o += "💟".repeat(Math.floor(r / 100000));
  r %= 100000;
  o += "💖".repeat(Math.floor(r / 50000));
  r %= 50000;
  o += "💗".repeat(Math.floor(r / 10000));
  r %= 10000;
  o += "💓".repeat(Math.floor(r / 5000));
  r %= 5000;
  o += "❣".repeat(Math.floor(r / 2000));
  r %= 2000;
  o += "💕".repeat(Math.floor(r / 1000));
  r %= 1000;
  o += "💝".repeat(Math.floor(r / 500));
  r %= 500;
  o += "💚".repeat(Math.floor(r / 200));
  r %= 200;
  o += "🧡".repeat(Math.floor(r / 100));
  r %= 100;
  o += "💜".repeat(Math.floor(r / 50));
  r %= 50;
  o += "💙".repeat(Math.floor(r / 10));
  r %= 10;
  o += "💛".repeat(Math.floor(r / 5));
  r %= 5;
  o += "❤".repeat(r);
  return o;
}

console.log(numbertoheart(500));  // Prints: 💝
console.log(numbertoheart(600));  // Prints: 💝🧡
console.log(numbertoheart(5000)); // Prints: 💓
console.log(numbertoheart(6000)); // Prints: 💓💚