Переменная JavaScript не проходит через модель Django

#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. В настоящее время мигалка работает, но анимация набора текста вообще не работает. Любая помощь будет признательна.