How to dynamically change name of html button using javascript as soon as page loads-CodePudding

Is it possible to change the words displayed on button using javascript? Im trying to change the words Day 1, Day 2, and Day 3 on the buttons to the current date and next 2 days, (Day 1-> 4/05, Day 2 -> 4/06, Day 3 -> 4/07)

In my views I'm passing some queries as context

#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)

my html page

<!-- 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 >
  <button  onclick="openCity(event, 'Day1')" id="defaultOpen">Day 1</button>
  <button  onclick="openCity(event, 'Day2')">Day 2</button>
  <button  onclick="openCity(event, 'Day3')">Day 3</button>
</div>

<div id="Day1" >
    {%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" >
    {%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" >
    {%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 %}

Im very new to html and javascript is it possible to change the names displayed from the 3 buttons, Day 1, Day 2, Day 3 to the strings Month and Day using javascript? The problem is that the buttons need to be dynamic as they correspond to the current date and following days

CodePudding user response：

In your HTML, give each button an id attribute:

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

In the JavaScript, you can set three variable to have whatever text you want to display in the button (you will set your dates here but these can be strings for now). Then set three variables to hold references to each button. Finally set each button reference to the value you want displayed in the button:

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;