rating.js:18 Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument

Question

i tried to make a simple star rating with html, css and js. I can't figure it out why my document.querySelector(.${rating}.stars-inner).style is equal to null. maybe someone can help me :)

const ratings = {
  _1984_: 4.7,
  der_alte_mann_und_das_meer: 3.2,
  im_westen_nichts_neues: 2.3,
  der_kleine_prinz: 3.4,
  tagebuch: 4.2
}

const starTotal = 5;

document.addEventListener("DOMContentLoaded", getRating);

function getRating() {
  for (let rating in ratings) {
    const starPercentage = (ratings[rating] / starTotal) * 100;
    const starRounded = `${Math.round(starPercentage / 10) * 10}%`;

    document.querySelector(`.${rating}.stars-inner`).style.width = starRounded;


  }
}

.stars-outer {
  display: inline-block;
  position: relative;
  font-family: FontAwesome;
}

.stars-outer::before {
  content: "\f006 \f006 \f006 \f006 \f006";
  font-weight: 900;
}

.stars-inner {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}

.stars-inner::before {
  content: "\f005 \f005 \f005 \f005 \f005";
  color: #f8ce0b;
}

<div id="wrapper">
  <header>
  </header>

  <nav>
    <ul>
      <li><a href="startseite.html">Startseite</a></li>
      <li><a href="login.html">Anmelden</a></li>
      <li><a href="buecher.html">Bücher</a></li>
      <li><a href="wunschliste.html">Wunschliste</a></li>
    </ul>
  </nav>

  <div id="content">
    <h1><span id="result"></span> bewerten.</h1>
    <script>
      document.getElementById("result").innerHTML = localStorage.getItem("textValue");
    </script>

    <table id="rating_table">
      <thead>
        <tr>
          <th>Bewertungen</th>
        </tr>
      </thead>
      <tbody>
        <tr class="tagebuch">
          <td>Tagebuch</td>
          <td>
            <div class="stars-outer">
              <div class="stars-inner"></div>
            </div>
          </td>
        </tr>
        <tr class="der_alte_mann_und_das_meer">
          <td>Der alte Mann und das Meer</td>
          <td>
            <div class="stars-outer">
              <div class="stars-inner"></div>
            </div>
          </td>
        </tr>
        <tr class="der_kleine_prinz">
          <td>Der kleine Prinz</td>
          <td>
            <div class="stars-outer">
              <div class="stars-inner"></div>
            </div>
          </td>
        </tr>
        <tr class="_1984_">
          <td>1984</td>
          <td>
            <div class="stars-outer">
              <div class="stars-inner"></div>
            </div>
          </td>
        </tr>
        <tr class="im_westen_nichts_neues">
          <td>Im Westen nichts neues</td>
          <td>
            <div class="stars-outer">
              <div class="stars-inner"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>