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

Html – Rotate a string in JavaScript

I’m new to coding.
I want to write a JS program to rotate a string (in the right direction) periodically by removing the last character every time and attaching it to the front. But when I run my code, a whole line or the whole page will be filled with the string. What’s wrong with my code?

I defined a function that: 1. stores the content of an HTML p element in a variable; 2. changes the value of the variable to a new string with the last character of the original string attached to its front; 3. changes the content of the p element into the new string, and 4. repeats this process using the setInterval method.

function animation() {

  var text = document.getElementsByTagName("p")[0].innerHTML;

  setInterval(function() {

    text = text.substring(text.length - 1, 0) + text.substring(0, text.length - 2);
    document.getElementsByTagName("p")[0].innerHTML = text;

  }, 100);

}
<body onload="animation()">
  <p>JavaScript</p>
</body>

Result:
Result

Tags:

4

Answers


  1. 0

    I think the issue might be with your substring indexing. You reference substring(text.length - 1, 0), which returns the string from the second-to-last character to the first character. It seems that you want only the last character, which would be substring(text.length - 1, text.length).

    I also changed text.substring(0, text.length - 2) to text.substring(0, text.length - 1) because you seem to want the entire string minus the last character, not minus the last two characters.

    Does this achieve your goal?

    function animation() {

  let text = document.getElementsByTagName("p")[0].innerHTML;

  setInterval(function() {

    text = text.substring(text.length - 1, text.length) + text.substring(0, text.length - 1);
    document.getElementsByTagName("p")[0].innerHTML = text;

  }, 100);

}
    <body onload="animation()">
  <p>JavaScript</p>
</body>

    For reference, substring (MDN) works like this:

    substring(indexStart, indexEnd)

    The substring() method returns the part of the string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied.

    Login or Signup to reply.
  2. 0

    You aren’t reading the value of the previous rotation. Here’s a clearer working version:

    function animation() {
  var text = document.getElementsByTagName("p")[0];

  setInterval(function() {
    text.innerHTML = text.innerHTML.at(-1) + text.innerHTML.slice(0, -1)
  }, 100);
}
    <body onload="animation()">
  <p>JavaScript</p>
</body>
    Login or Signup to reply.
  3. 0

    I believe your problem is just a slight misunderstanding in how the substring functions works: text.substring(text.length - 1, 0) doesn’t necessarily make much sense because the start point is after the end point. In this case it just ends up being equivalent to text.substring(0, text.length - 1) which explains why your text keeps getting larger and larger.

    Replacing text.substring(text.length - 1, 0) with text.substring(text.length - 1, text.length) should do the trick, and hopefully it’s obvious why this gets the last letter. Also, the end index is non-inclusive, meaning the substring doesn’t include the character at the index, so you’ll want to replace text.substring(0, text.length - 2) with text.substring(0, text.length - 1)

    As a side note, instead of using text.substring(text.length - 1, text.length) to get the last character, you could just use text[text.length - 1] to get it, which I think is a bit cleaner.

    Here’s a working code snippet with the changes mentioned:

    function animation() {

  var text = document.getElementsByTagName("p")[0].innerHTML;

  setInterval(function() {

    text = text[text.length - 1] + text.substring(0, text.length - 1);
    document.getElementsByTagName("p")[0].innerHTML = text;

  }, 100);

}
    <body onload="animation()">
  <p>JavaScript</p>
</body>

    To make sure you get how everything works I would try and see if you can get it to roll/rotate the other way

    Login or Signup to reply.
  4. 0

    a better way to do it is by using array of chars:

    function animation(){
  //select the P by the id
  var p = document.getElementById("reversed");
  
  setInterval(()=>{
    let text = p.textContent; //get the text
    let  newText = [...text]; //turn it into array of chars
    let lastLetter=newText.pop();  //pop the last element
    newText.unshift(lastLetter); //add it to the start of the array
    p.textContent=newText.join("");  //update the text
  },100)
}
    <body onload="animation()">
  <p id="reversed">JavaScript</p>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search