Quiero agregar (mostrar también) 21 días a la fecha de la primera dosis si se seleccionó BioNTech o agregar 28 días a los días seleccionados si se seleccionó Sinovac.
Enter your First name: <br> <input font-size="30px" style="padding:10px; width:500px;font-size:20px"type="text" name="FName" placeholder="Last Name"> <br> <br /> Enter your Last name: <br /> <input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="LName" placeholder="First Name"> <br> <br /> Enter your Contact number: <br> <input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="ContactN" placeholder="Contact"> <br> <br /> Enter the date of First Shot: <br> <input font-size="30px" style="padding:10px; width:500px; font-size:20px" type="date" name="DateR" value="dd/mm/yy"> <br> <br /> Type of 1st Shot: <p style="color: #C5C6C7"> <input style="font-size:20px" type="radio" name="Fshot" value="BionTech" checked> BioNTech     <input style="font-size:20px" type="radio" name="Fshot" value="SinoVac"> SinoVac </p> </div> </center> <br /><br> <input type="submit" style="font-size:22px" value="Book Now" class="hero-btn">El siguiente fragmento debería hacer el trabajo:
const d=document.querySelector("[name=DateR]"), d2=document.querySelector("[name=DateS]"), t=[...document.querySelectorAll("[name=Fshot]")]; d.addEventListener("change",addDate); t.forEach(e=>e.onclick=addDate); function addDate(){ if(!d.value) return; // exit quietly if no date has yet been selected const dat=new Date(d.value); dat.setDate(dat.getDate()+ (t.find(e=>e.checked).value==="BionTech" ? 21 : 28)); d2.value=dat.toISOString().slice(0,10); } <div> Enter your First name: <br> <input font-size="30px" style="padding:10px; width:500px;font-size:20px"type="text" name="FName" placeholder="First Name"> <br> <br /> Enter your Last name: <br /> <input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="LName" placeholder="Last Name"> <br> <br /> Enter your Contact number: <br> <input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="ContactN" placeholder="Contact"> <br> <br /> Enter the date of First Shot: <br> <input font-size="30px" style="padding:10px; width:500px; font-size:20px" type="date" name="DateR" value="dd/mm/yy"> <br> <br /> Type of 1st Shot: <p style="color: #C5C6C7"> <input style="font-size:20px" type="radio" name="Fshot" value="BionTech" checked> BioNTech     <input style="font-size:20px" type="radio" name="Fshot" value="SinoVac"> SinoVac </p> <input font-size="30px" style="padding:10px; width:500px; font-size:20px" type="date" name="DateS" readonly> </div> </center> <br /><br> <input type="submit" style="font-size:22px" value="Book Now" class="hero-btn"> </div> La función universal de manejo de eventos addDate() hace todo el trabajo pesado:
dat () a partir de elladatdat al segundo campo de entrada de fecha (solo lectura). El objeto Date de JavaScript permite agregar una fecha simple cambiando la parte del "día del mes" con .setDate() . El objeto Date convierte los números de fecha "no válidos" en fechas válidas cambiando al mes siguiente si es necesario.