How to create a button to change a text in my html with data coming from Django's

I’m starting to work with Django, and I’m starting a test to solidify what I’ve been learning. The idea is a single page, which displays a sentence as soon as the site opens. Below the phrase, there is a button that I would like to change the phrase to some other phrase coming from a variable declared in and which contains several phrases that were registered through Django’s admin panel.

This is my file:

from django.db import models

class Base(models.Model):
    criado = models.DateField('Criado', auto_now_add=True)
    modificado = models.DateField('Atualização', auto_now=True)
    ativo = models.BooleanField('Ativo', default=True)

    class Meta:
        abstract = True

class Frase(Base):
    frase = models.CharField('Frase', max_length=100)
    dica = models.CharField('Dica', max_length=200, default='-')

    class Meta:
        verbose_name = 'Frase'
        verbose_name_plural = 'Frases'

    def __str__(self):
        return self.frase

This is my file:

from django.views.generic import TemplateView
from .models import Frase

class IndexView(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        context['frases'] = Frase.objects.order_by('?').all()

        return context

This is my index.html:

            <div class="container px-4 px-lg-5 h-100">
                <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
                    <div class="col-lg-8 align-self-end">
                        <h1 class="text-white font-weight-bold" id="frase">{{ frases|first }}</h1>
                        <hr class="divider" />
                    <div class="col-lg-8 align-self-baseline">
                        <a class="btn btn-primary btn-xl" onclick="nova_frase()">Nova frase</a>
     (...) <!--rest of the html code-->
              .on('click', () => document.getElementById('texto').innerText = '{{ frases|random }}')

The first click works, for ‘{{ frases|random }}’ is replaced by a random phrase from the QuerySet Phrases. I would like that, at each button click, a new phrase would appear on the screen, without having to reload the page.
Please help me so I can continue my studies. I’ve been stuck on this for almost two weeks now.

That’s something that is going to require some JavaScript and a custom view to retrieve the text.

Browsers and Django are fundamentally built around the complete HTTP request / response cycle. A “submit” from a form retrieves a page. Doing anything else means that you’ve got JavaScript running in that page issuing AJAX calls and processing the response.

1 Like

So, in my researches, I realized that the use of Javascript and AJAX is necessary.
I don’t know which topics of this technology to start studying to try to solve this problem. I wouldn’t want to interrupt this Django course right now to start this Javascript one over the top.
Could you please tell me which topics I could use to at least complete this project?

There’s no real shortcut for this. If you don’t want to interrupt your course, I’d suggest finishing your course first and come back to this later.

Hello again.
In addition to posting my question here, I looked on StackOverflow for someone who could give me a light.
A short time ago someone suggested a solution to this problem and it worked well for me (so far at least).
I don’t know if it’s the best approach for that (I don’t think so, but I’ll get more knowledge about these things in the future), however it worked here. And as the project is something simple and has no commercial purpose, I will adopt this solution.

If you are interested in seeing the solution presented by the friend on the other forum, just follow the link.
How to create a button to change a text in my html with data coming from Django’s (Stackoverflow em português)
Thanks to everyone who saw it, and answered this question here.