#javascript #python #html #django
Вопрос:
Тема-это поле символов, резюме-текстовое поле внутри темы.
По какой-то причине JavaScript не проходит по текстовому полю сводки-он просто использует самое первое текстовое поле сводки и просто игнорирует остальные.
Я хочу, чтобы каждое текстовое поле сводки просматривалось и отображалось. Не только первый.
Имеет ли это смысл? Что — то не так с моим кодом JavaScript.
Как вы можете видеть на изображении-краткое описание второй темы (биткойн) отсутствует (выделено красным цветом) Изображение, отображающее проблему на веб-странице
{%for topic in topics%}
<script>
var i = 0;
var txt = '{{topic.summary}}';
function typeWriter() {
if (i < txt.length) {
document.getElementsByClassName('js-typewrite')[0].innerHTML = txt.charAt(i);
i ;
setTimeout(typeWriter, 65);
}
}
setTimeout(typeWriter, 1000);
</script>
<body>
<p class="content">
<span class="typewrite anim-typewrite js-typewrite"></span>
</p>
</body>
</div>
<div id = 'mpost-text'>
{{topic.text|linebreaks}}
</div>
<div id = 'change-text'>
{%if topic.owner == request.user and user.is_authenticated %}
<a href = "{%url 'new_sites:post_edit' topic.id%}">Edit entry</a>
<a href = "{%url 'new_sites:delete_post' topic.id%}">Delete topic</a>
{% endif %}
</div>
</div>
{%empty%}
<li>No topics have been added yet.</li>
{% endfor %}
{%if user.is_authenticated%}
<a href="{% url 'new_sites:new_post'%}">Add Post</a>
{%endif%}
{%конечный блок%}
Ответ №1:
Вместо того, чтобы зацикливать все , включая <script>
, почему бы просто не зациклить текст и позволить javascript позаботиться обо всем остальном ?
{% for topic in topics %}
<p class="content">
<span class="typewrite anim-typewrite js-typewrite">{{ topic.summary }}</span>
</p>
{% endfor %}
<script>
document.querySelectorAll('.js-typewrite').each(function() {
// Do the typewriting animation here
})
</script>
Возможно, не имеющее отношения к этой проблеме, у вас должен быть только один body
тег внутри вашего HTML.
Это основная часть всего документа, это не означает основную часть статьи.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
Комментарии:
1. Спасибо вам за помощь. У меня возникли проблемы с анимацией JavaScript. Я не могу написать правильный сценарий для создания эффекта записи типов-у меня очень мало опыта работы с JavaScript. В настоящее время мигалка работает, но анимация набора текста вообще не работает. Любая помощь будет признательна.