querySelector and string splitting. Syntax is correct, can't figure out why this isn't targeting right

Question

My question is pretty straight forward, I have some code written that will split the text in the

element under div class text. The javascript targeting that element is not working and I trouble shot it and found that it won't split, and not run anything in the template strings. I have attached the code below.

HTML:

<div class="circle">
        <div class ="logo"> </div>
        <div class="text">
            <p> test </p>
        </div>
    </div>
    <script>
        const text = document.querySelector('.text p');
        text.innerHTML = text.innerText.split("").map(
        (char, i) => 
        `<span style="transform:rotate(${i * 5}deg)">${char}</span>`
        ).join("")
    </script>

Answer 1

You need to make the inserted spans not inline elements, because otherwise the transformation won't be applied. inline-block works.

const text = document.querySelector('.text p');
text.innerHTML = text.innerText.split("").map(
  (char, i) =>
  `<span style="display: inline-block; transform:rotate(${i * 5}deg)">${char}</span>`
).join("")

<div class="circle">
  <div class="logo"> </div>
  <div class="text">
    <p> test </p>
  </div>
</div>