javascript - Contenteditable field onchange event add date -

html:

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

javascript:

     function add7day() {          var str = document.getelementbyid(#bon_date).value;          var startdate = str.split("/");          var month = parseint(stardate[0], 10);          var day = parseint(stardate[1], 10);          var o_month = parseint(stardate[0], 10);          var o_day = parseint(stardate[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;           }             

i can string input type field can`t contenteditable field.

and when runs var month = parseint(stardate[0],10); errors like:

stardate[0] not define..

i want input date manual , gets date after 7 days.

any ideas?

okay, begin.

i'm not going question use of contenteditable element instead of input type="text" or input type="date" element, i'm going fix javascript.

elements contenteditable not converted input elements or textareas, not have value property, have textcontent because they're otherwise normal html nodes can have text nodes.

elements contenteditable not emit onchange or change event when text content edited. listen input event, break code, because function amend element's contents every time user pressed key—making practically unusable.

the next best thing onchange event onblur/blur event, we'll use that. means when user focuses off event, i.e. clicks outside (or presses tab key etc) function fire.

---

stardate[0] comes undefined because didn't define variable called stardate, defined startdate. similarly, none of code works @ without getting bon_date element, in case done fixing code document.getelementbyid() given parameter 'bon_date' (not '#bon_date', because document.getelementbyid not use css selectors).

// store element in variable don't have keep writing crap out.  var bd = document.getelementbyid('bon_date');    // listen blur event adding event listener in javascript.  // use 'onblur=' attribute on element in question.  bd.addeventlistener('blur', add7day, false);    function add7day() {    // element's text content.    var str = bd.textcontent;      // startdate = bd.textcontent.split("/") , leave out out str variable.    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;      }        // no need use innerhtml, amend textcontent again      bd.textcontent = o_month + "/" + o_day + "~" + month + "/" + day;      } else {      if ((day + 7) > 30) {        month = month + 1;        day = day + 7 - 30;      } else {        day = day + 7;      }       bd.textcontent = o_month + "/" + o_day + "~" + month + "/" + day;      }  }

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

that gets code working. sort of. should think validating user input make sure it's valid date (not 1000th day of 50th month) etc. moment.js handy javascript library use when dealing dates , times.