How to change add and remove tags with JS in django template

Question

I have a quiz Django app which consists of two parts. One is showing 10 sentences with their audio to remember, one per page, and the second is asking questions for the same set of sentences. First part was set up with js function which creates pagination in my html the following way:

my_template.html

<button id="prev">prev</button>
<button id="next">next</button>
<ul class="list-articles" id="dd">

</ul>

<script>
var my_objects =  `{{ my_objects|safe}}:` #list of items from my view function

function paginate(action) {
        console.log(action)
        if (action ==='next') {
            page_number++;
        }
        else{
                page_number--;
            }

       const audio = document.createElement('audio');
       audio.src =`/media/${my_objects[page_number].fields.audio}`;

        $('#dd').empty();
        $('#dd').append('<li><h1>'+ my_objects[page_number].fields['content'] +'</h1></li>');
        $('#dd').append(audio); 
        $('#page_number').val(page_number);
    } 

  document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('#next').onclick = function() {
           paginate('next'); #same goes for 'prev' button.
}
  })
</script>

Now when the user paginated through all the sentences I want to show the continue button and if the user clicks it, start the second part. The second part has absolutely same page except I need to hide content of my objects and leave only audio or vice versa and add textarea tag for the user’s input. After that I need to loop over my objects again – now in the form of questions. I need to do that without page re-rendering so I don’t need to store the list of objects or query the DB again.

I tried to make it with tag disabling and activating the second loop after the first ends but that looks quite messy and I suppose there is a smarter way of doing that. I’m not a JS developer so any help would be appreciated!

Asked By: O'nayd

||

Source

Answer 1

Thanks for all who viewed and not commented! I found the answer myself. Just need to add JS functions which will empty the main tag and refill with necessary field.
Details: By accessing elements of DOM in the following way you can empty any element on a web page. For example, if we have a div like:

<div class= id="maindiv">
<h2> Hello, world! </h2>
</div>

We can empty and refill it with a new header:

var container = document.getElementById("maindiv");
container.empty();
new_header = document.createElement('h2');
new_header.innerHTML = 'Hello, brave new world!'
container.append(new_header);

Same applies to the whole web-page. The only thing is, if it is too big, you probably going to be tired of manipulating the DOM each time. So, you may want to check out some frameworks like React to make it easier .

Answered By: O'nayd

How to change add and remove tags with JS in django template

Question:

Answers: