Currently, I am working on a project that involves attendance management. One of the key features I am implementing is a drop-down box where users can select a month. When a month is selected, a dynamic number of buttons will be generated in a separate division. For example, if January is chosen, 31 buttons will appear, and so on for other months.
Below is an excerpt from my HTML code:
var counterButton = 0;
function addAllInputs(divName, inputType) {
var newdiv = document.createElement('div');
switch(inputType) {
case 'January':
for(i=0;i<31;i++)
{
newdiv.innerHTML = "Entry " + (counterText + 1) + "<br><input type='button' name='myInputs[]'>";
counterText++;
}
break;
case 'February':
for(i=0;i<28;i++)
{
newdiv.innerHTML = "Entry " + (counterText + 1) + "<br><input type='button' name='myInputs[]'>";
counterText++;
}
break;
case 'March':
for(i=0;i<31;i++)
{
newdiv.innerHTML = "Entry " + (counterText + 1) + "<br><input type='button' name='myInputs[]'>";
counterText++;
}
break;
case 'April':
for(i=0;i<30;i++)
{
newdiv.innerHTML = "Entry " + (counterText + 1) + "<br><input type='button' name='myInputs[]'>";
counterText++;
}
break;
}
document.getElementById(divName).appendChild(newdiv);
}
<pre>
<div>
<select>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
</div>
</pre>