Как динамически изменить название html-кнопки с помощью javascript при загрузке страницы

Можно ли изменить слова, отображаемые на кнопке, с помощью javascript? Я пытаюсь изменить слова Day 1, Day 2 и Day 3 на кнопках на текущую дату и следующие 2 дня, (Day 1-> 4/05, Day 2 -> 4/06, Day 3 -> 4/07)

В моих представлениях я передаю некоторые запросы в качестве контекста

#appointmentApp.views time_selector_view(request):
    #list of the next 2 dates
    day = datetime.datetime.now()
    dates.append(day)
    while (i < 3):
        day = day datetime.timedelta(days = 1)
        dates.append(day)
        i += 1

    #3 queries for each date in the list
    timeslots = Timeslots.objects.filter(date_sel=dates[0].date())
    timeslots2 = Timeslots.objects.filter(date_sel=dates[1].date())
    timeslots3 = Timeslots.objects.filter(date_sel=dates[2].date())

    #I want each time slot query to have its own tab
    context = {
        'dates' : dates,
        'time_slots1' : timeslots,
        'time_slots2' : timeslots2,
        'time_slots3' : timeslots3
    }

    return render(request, appointment_template/time_selector.html, context)

моя html-страница

<!-- want to change the words displayed on the buttons -->
<!-- appointment_template/time_selector.html -->
{% extends "base.html" %}

{% block content %}
<body>

<!-- Is it possible to change the words displayed on the buttons, Day 1 Day 2 and Day 3 using javascript?-->
<div class="time_slot_tabs">
  <button class="time_slot_tab_button" onclick="openCity(event, 'Day1')" id="defaultOpen">Day 1</button>
  <button class="time_slot_tab_button" onclick="openCity(event, 'Day2')">Day 2</button>
  <button class="time_slot_tab_button" onclick="openCity(event, 'Day3')">Day 3</button>
</div>

<div id="Day1" class="time_slot_tab_content">
    {%for t1 in time_slots1 %}
        <a href="{% url 'Appointment Confirmation' in_id=appointment.id in_time_slot=t1.time_slot day=1%}">{{t1.time_slot_string}}</a><br>
    {%endfor%}
</div>

<div id="Day2" class="time_slot_tab_content">
    {%for t2 in time_slots2 %}
        <a href="{% url 'Appointment Confirmation' in_id=appointment.id in_time_slot=t2.time_slot day=2%}">{{t2.time_slot_string}}</a><br>
    {%endfor%}
</div>

<div id="Day3" class="time_slot_tab_content">
    {%for t3 in time_slots3 %}
        <a href="{% url 'Appointment Confirmation' in_id=appointment.id in_time_slot=t3.time_slot day=1%}">{{t3.time_slot_string}}</a><br>
    {%endfor%}
</div>

<script>
function openCity(event, day) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("time_slot_tab_content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("time_slot_tab_button");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(day).style.display = "block";
  event.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

//The values I want to have written on the button instead of Day 1-3
var today = new Date();
var day1 = String(today.getDate()).padStart(2, '0');
var month1 = String(today.getMonth() + 1).padStart(2, '0');
today.setDate(today.getDate() + 1);
var day2 = String(today.getDate()).padStart(2, '0');
var month2 = String(today.getMonth() + 1).padStart(2, '0');
today.setDate(today.getDate() + 1);
var day3 = String(today.getDate()).padStart(2, '0');
var month3 = String(today.getMonth() + 1).padStart(2, '0');
</script>
   
</body>
{% endblock %}

Я очень новичок в html и javascript, возможно ли с помощью javascript изменить названия, отображаемые на 3 кнопках, День 1, День 2, День 3 на строки Месяц и День? Проблема в том, что кнопки должны быть динамическими, поскольку они соответствуют текущей дате и последующим дням

В вашем HTML дайте каждой кнопке атрибут id:

<button id='button1'></button>
<button id='button2'></button>
<button id='button3'></button>

В JavaScript, вы можете установить три переменные, которые будут содержать текст, который вы хотите отобразить в кнопке (здесь вы будете устанавливать даты, но пока это могут быть строки). Затем установите три переменные для ссылок на каждую кнопку. Наконец, установите ссылку каждой кнопки на значение, которое вы хотите отобразить в кнопке:

let button1Text = "Button 1 says this"
let button2Text = "Button 2 says this"
let button3Text = "Button 3 says this"

let firstButton = document.getElementById('button1');
let secondButton = document.getElementById('button2');
let thirdButton = document.getElementById('button3');

firstButton.innerHTML = button1Text;
secondButton.innerHTML = button2Text;
thirdButton.innerHTML = button3Text;
Вернуться на верх