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

element strings length html

I’m following https://www.w3resource.com/javascript-exercises/javascript-basic-exercises.php and got stuck on exercise 5:

  1. Write a JavaScript program to rotate the string ‘w3resource’ in the right direction. This is done by periodically removing one letter from the string end and attaching it to the front.

my first thought was create a variable and using queryselector to get my content inside my H1, now im looking for a way to change that string. I know in JS, strings are immutable, so my idea is based on using a different variable to do that, till there my thought was fine, but im stucked in how i can get a required index on a text inside my H1 element and it is just yielding me wrong lenght, i dont know why. I’ve already read a lot JS contents on MDN website, but couldnt find any that might help me.

let MyString = document.querySelector(".rotate_h1_content");

let output = document.querySelector(".output");

output.textContent = MyString.childNodes[0].length;
body{
    background-color: black;
}

h1{
margin: 0px;
padding: 0px;

}
.rotate_h1_content, .rotate_content{
    margin: 0px;
    padding: 0px;
}
.outer_content{
    display: block;
    width: 100%;
    height: 200px;
    margin-top: 200px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 1px;
    text-align: center;
    color: white;
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="Training">
        <meta name="author" content="Vitor Mota">
        <title>Training</title><!--Practice-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                       <!--Estou colocando em ingles, mas vou traduzindo nos comentarios-->
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="cssFile2.css">
        <script src="JsExc2.js" defer></script>
    </head>
    <body >
        <div class="outer_content">
            <div class="rotate_content">
                <h1 class="rotate_h1_content">
                   Any string
                </h1>
                <h2 class="output">
                   
                </h2>
            </div>
        </div>
        
    </body>
</html>

i tried use child nodes and lenght to see if my string has the right lenght, but just yield that akward 47 number, and my first character is on 20 index, can someone help me? i though that it might be the padding and margin giving those extra charaters, but are not

Tags:

2

Answers


  1. 0

    The "length" is also counting all of the spaces before the word "Any".

    If you trim() off the spaces, you will get the correct number.

    Perhaps in this instance you should not format that specific div in your code – it will be easier to work with it like this:

    <h1 class="rotate_h1_content">Any string</h1>

    let MyString = document.querySelector(".rotate_h1_content");

let output = document.querySelector(".output");

output.textContent += MyString.textContent.trim().length;
    body{
    background-color: black;
}

h1{
margin: 0px;
padding: 0px;

}
.rotate_h1_content, .rotate_content{
    margin: 0px;
    padding: 0px;
}
.outer_content{
    display: block;
    width: 100%;
    height: 200px;
    margin-top: 200px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 1px;
    text-align: center;
    color: white;
}
    <!DOCTYPE html>
<html>
    <head>
        <meta name="Training">
        <meta name="author" content="Vitor Mota">
        <title>Training</title><!--Practice-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                       <!--Estou colocando em ingles, mas vou traduzindo nos comentarios-->
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="cssFile2.css">
        <script src="JsExc2.js" defer></script>
    </head>
    <body >
        <div class="outer_content">
            <div class="rotate_content">
                <h1 class="rotate_h1_content">
                   Any string
                </h1>
                <h2 class="output">
                   
                </h2>
            </div>
        </div>
        
    </body>
</html>
    Login or Signup to reply.
  2. 0

    You can do it with string operations:

    let p = document.getElementById("something");
current = p.innerText;
setInterval(function() {
    p.innerText = current = current.substring(1) + current[0];
}, 200);
    <p id="something">Any string</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search