JSFiddle - React, Tailwind, and code Playground

by Mamdouh Freelancer

HTML

<p id="bon_date"  class="inline" style="color:#0000ff;" contenteditable="true"> enter date </p>
<button onclick="add7day()">add7day</button>

<ol>
<li>you can't add onchange event into div, you can listen on click to outer div or body to do the same task</li>
<li>variables are sensative so stardate is not the same startdate</li>
<li>use document.getElementById("bon_date").innerText</li>
<li>Note: you are parsing date like m/d/y </li>
<ol>
<script>
function add7day() {
         var str = document.getElementById("bon_date").innerText;
         var startdate = str.split("/");
         var month = parseInt(startdate[0], 10);
         var day = parseInt(startdate[1], 10);
         var o_month = parseInt(startdate[0], 10);
         var o_day = parseInt(startdate[1], 10);
         if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
           if ((day + 7) > 31) {
             month = month + 1;
             day = day + 7 - 31;
           } else {
             day = day + 7;
           }
           document.getElementById("bon_date").innerHTML = o_month + "/" + o_day + "~" + month + "/" + day;

         } else {
           if ((day + 7) > 30) {
             month = month + 1;
             day = day + 7 - 30;
           } else {
             day = day + 7;
           }

           document.getElementById("bon_date").innerHTML = o_month + "/" + o_day + "~" + month + "/" + day;

         }
}

</script>