Question 44047 in Html Question posted in
Some basic documentation can be found here.

How to split text in JS to transform it as rotate in a button? – Html

I’m using JavaScript to split text to letters to rotate them around an anchor tag button, as route. But I have problem in the following code which appears to do nothing.

const textButtens = document.querySelectorAll('.contact');

textButtens.forEach(textButten => (
  let text = textButten.querySelector('p');

  text.innerHTML = text.innerHTML.split('').map((Character, index) => '<span.style="transform: rotate($(index * 12)deg)">$(character)</span>').join('');
));
.contact {
  color: red;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.contact p {
  font-size: 1rem;
  font-weight: 600;
  width: 10rem;
  height: 10rem;
  display: flex;
  justify-content: center;
}

.contact p span {
  position: absolute;
  transform-origin: 0.3rem 5rem;
}
<a href="mailto:[email protected]" class="contact">
  <p>CONTACT - SEND ME AN EMAIL</p>
</a>

By reading the docs that should work, but I can’t understand what is wrong here.

I have tried another JS code, didn’t work either.

Tags:

3

Answers


  1. 0

    The issue in your code is with the syntax of the template literals. You are using $(index * 12) instead of ${index * 12} to interpolate the variable. The correct syntax for interpolation is ${variable}.

    I also corrected the spelling of "textButtons" and added curly braces to the forEach loop.

    const textButtons = document.querySelectorAll('.contact');

textButtons.forEach(textButton => {
  let text = textButton.querySelector('p');
  text.innerHTML = text.innerHTML.split('').map((character, index) => `<span style="transform: rotate(${index * 12}deg)">${character}</span>`).join('');
});
    .contact {
  color: red;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.contact p {
  font-size: 1rem;
  font-weight: 600;
  width: 10rem;
  height: 10rem;
  display: flex;
  justify-content: center;
}

.contact p span {
  position: absolute;
  transform-origin: 0.3rem 5rem;
}
    <a href="mailto:[email protected]" class="contact">
  <p>CONTACT - SEND ME AN EMAIL</p>
</a>
    Login or Signup to reply.
  2. 0

    There are multiple syntax errors in your code

    Fixed syntax:

    const textButtens = document.querySelectorAll(".contact");

textButtens.forEach((textButten) => {
  let text = textButten.querySelector("p");

  text.innerHTML = text.innerHTML
    .split("")
    .map(
      (character, index) =>
      `<span style="transform: rotate(${index * 12}deg)">${character}</span>`
    )
    .join("");
});
    .contact {
  color: red;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.contact p {
  font-size: 1rem;
  font-weight: 600;
  width: 10rem;
  height: 10rem;
  display: flex;
  justify-content: center;
}

.contact p span {
  position: absolute;
  transform-origin: 0.3rem 5rem;
}
    <a href="mailto:[email protected]" class="contact">
  <p>CONTACT - SEND ME AN EMAIL</p>
</a>
    Login or Signup to reply.
  3. 0 
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <style>
    .contact {
      color: red;
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    .contact p {
      font-size: 1rem;
      font-weight: 600;
      width: 10rem;
      height: 10rem;
      display: flex;
      justify-content: center;
    }

    .contact p span {
      position: absolute;
      transform-origin: 0.3rem 5rem;
    }
  </style>
</head>

<body>
  <h1>
    This is a static template, there is no bundler or bundling involved!
  </h1>
  <a href="mailto:[email protected]" class="contact">
    <p>CONTACT - SEND ME AN EMAIL</p>
  </a>
</body>

</html>
<script>
  const textButtens = document.querySelectorAll('.contact');

  textButtens.forEach(textButten => {
    let text = textButten.querySelector('p');
    console.log(text, 'text')
    text.innerHTML = text.innerHTML
      .split('')
      .map((Character, index) => {
        return `<span style="transform: rotate(${index * 12}deg)">${Character}</span>`
      })
      .join('');
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search