Convert rating value to visible stars using fontawesome icons
I recently implemented this same thing, here's what I used. Main difference: Let the for loop do the math for you. By the end of the first loop, if there is half a star it will be in the i variable. Use an array to buffer your string (or create DOM objects instead, don't use += to build a string).



document.getElementById("stars").innerHTML = getStars(3.6);

function getStars(rating) {

  // Round to nearest half
  rating = Math.round(rating * 2) / 2;
  let output = [];

  // Append all the filled whole stars
  for (var i = rating; i &gt;= 1; i--)
    output.push('&lt;i class="fa fa-star" aria-hidden="true" style="color: gold;"&gt;&lt;/i&gt;&amp;nbsp;');

  // If there is a half a star, append it
  if (i == .5) output.push('&lt;i class="fa fa-star-half-o" aria-hidden="true" style="color: gold;"&gt;&lt;/i&gt;&amp;nbsp;');

  // Fill the empty stars
  for (let i = (5 - rating); i &gt;= 1; i--)
    output.push('&lt;i class="fa fa-star-o" aria-hidden="true" style="color: gold;"&gt;&lt;/i&gt;&amp;nbsp;');

  return output.join('');

}
&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt;

&lt;b&gt;Rating: &lt;span id=stars&gt;&lt;/span&gt;&lt;/b&gt;