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 >
<div class ="logo"> </div>
<div >
<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>
CodePudding user response:
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 >
<div > </div>
<div >
<p> test </p>
</div>
</div>