Длина строки элемента html
Я подписался на https://www.w3resource.com/javascript-exercisions/javascript-basic-exercisions.php и застрял на упражнении 5:
- Напишите программу на JavaScript, которая будет вращать строку «w3resource» в правильном направлении. Это делается путем периодического удаления одной буквы с конца струны и прикрепления ее к передней части.
моей первой мыслью было создать переменную и использовать селектор запросов, чтобы получить мой контент внутри моего H1, теперь я ищу способ изменить эту строку. Я знаю, что в JS строки неизменяемы, поэтому моя идея основана на использовании для этого другой переменной, пока я не думал, что все в порядке, но я застрял в том, как получить необходимый индекс для текста внутри моего элемента H1, и это просто дает мне неправильную длину, я не знаю почему. Я уже прочитал много контента по JS на веб-сайте MDN, но не смог найти ничего, что могло бы мне помочь.
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>Я попробовал использовать дочерние узлы и длину, чтобы проверить, имеет ли моя строка правильную длину, но просто получил это неудобное число 47, а мой первый символ находится в индексе 20, может ли кто-нибудь мне помочь? Я думал, что это могут быть отступы и поля, дающие эти дополнительные символы, но это не так.
мне нужно повернуть строку (любую) в html w3resource.com/javascript-exercisions/… упражнение 5: напишите программу на JavaScript для поворота строки «w3resource» в правильном направлении. Это делается путем периодического удаления одной буквы с конца строки и прикрепления ее к передней части.... Итак, я искал способ обработки строки внутри элемента html, такой же простой, как и в любом другом языке, но во-первых, он дает мне неправильную длину.
Тогда, пожалуйста, отредактируйте свое сообщение, чтобы указать это, и включите это описание в свое сообщение, потому что это не обычное использование слова «поворот» (это «прокручивание» или даже «прокрутка» строки, а не «вращение» строки). ). В упражнении рассказывается, что вам следует делать: взять строку, разделить ее на «последнюю букву» и «все, что до последней буквы», а затем создать новую строку из этих двух частей.
Извините, я использовал описание упражнения на веб-сайте.
Найдите в Интернете и/или stackoverflow информацию о том, как разделить строку с помощью JavaScript (должно быть довольно легко найти, это встроенная функция). Прочитав несколько сообщений/страниц о том, как это сделать, и просмотрев приведенные в них примеры, вы сможете понять, как правильно выполнить это упражнение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
«Длина» также учитывает все пробелы перед словом «Любой».
Если вы trim() уберете пробелы, вы получите правильное число.
Возможно, в этом случае вам не следует форматировать этот конкретный div в вашем коде — с ним будет проще работать так:
<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>перед фактическим текстом в элементе html всегда будут другие пробелы?
Нет, вы добавили эти пробелы, когда структурировали свой HTML, как вы это сделали - javascript подсчитывает все пробелы от полей в вашем HTML. Обратите внимание, что на веб-странице будет отображаться только один пробел (именно так работает HTML), но JavaScript захватит все ~ 40 пробелов. Таким образом, вы можете либо использовать .trim(), как я это делал, когда читали textContent в javascript, либо удалить лишние пробелы из HTML, как предложено в моем ответе.
Вы можете сделать это с помощью строковых операций:
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>вам не пришлось использовать здесь функцию обрезки(), чтобы избежать пробелов перед строкой, почему?
@ Sung-99, потому что у меня не было белых символов до и после любой строки в моем p. Если этот ответ решил проблему, вы можете принять его как правильный ответ.
@Sung-99 Sung-99, вы можете обернуть обрезку() при первой инициализации тока вокруг p.innerText, если у вас могут быть пробелы, которые вам не нужны.
ТЕПЕРЬ я получил это, я просто добавляю Enter после моего div и после моего объявления h1, поэтому в нем 47 символов, спасибо.
Я пытаюсь понять ваш ответ, хорошо, это правильно, но можете ли вы объяснить, почему вам приходится назначать два раза?
@Sung-99 конечно. innerText — это особенная вещь в Javascript, потому что, когда вы меняете его значение, структура вашей веб-страницы обновляется. Когда ваша строка заканчивается пробелом, присвоение ее innerText может обрезать ее как ненужные пробелы (что и произошло, когда я это попробовал), и, следовательно, лучше иметь строку, которая не преобразует структуру HTML вперед и назад и из которой ваши предполагаемые пробелы не обрезаются, если вы не хотите, чтобы они были обрезаны.
Что означает «вращение строки»? Вы имеете в виду, что вам нужно повернуть элемент HTML или как изменить содержимое элемента HTML? Поскольку ни одна из этих «строок изменения» не является первой, это задача CSS, а вторая — это просто замена одной строки на другую. Прямо сейчас вы делаете последнее, устанавливая текст элемента равным длине строки внутри вашего
h1. Кроме того, не забудьте показать только ту проблему, о которой вы спрашиваете: в вашем фрагменте гораздо больше CSS, чем должно быть, а ваш HTML содержит кучу<head>контента, который совершенно не нужен.