title: Make Edit button function work properly
body: <p>i have the following code:</p>
  
  <pre><code>function appendText(){
  
          var text = document.getElementById('usertext').value;
  
              if ( document.getElementById('usertext').value ){
  
                  var div = document.createElement('div');
                  div.className = 'divex';
  
                  var li = document.createElement('li');
                  li.setAttribute('id', 'list');  
                  div.appendChild(li);
  
                  var texty = document.createTextNode(text);
                  var bigdiv = document.getElementById('addedText');
  
                  var editbutton = document.createElement('BUTTON');
                  editbutton.setAttribute('id', 'button_click');
                  var buttontext = document.createTextNode('Edit');
                  editbutton.appendChild(buttontext); 
  
                  bigdiv.appendChild(li).appendChild(texty);
                  bigdiv.appendChild(li).appendChild(editbutton);
  
                  editbutton.onclick = makeAreaEditable;
                  var makeAreaEditable = function(){
  
                              var textareaEdit = document.createElement('textarea');
                              textareaEdit.onclick = myFunction;
                              textareaEdit.customProperty = li.value;
  
                              function myFunction(e){
                                  var objLi = e.currentTarget;
                                  objLi.value = objLi.customProperty;
                                  document.getElementByID("button_click").value = "ok";
                              };
                          };
  
                  document.getElementById('usertext').value = "";   
          }        
  };
  </code></pre>
  
  <p>And the following html: </p>
  
  <pre><code>             &lt;textarea id="usertext"&gt;&lt;/textarea&gt;
      &lt;button onClick="appendText()"&gt;Add text &lt;/button&gt;
  
      &lt;div id="addedText" style="float:left"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want my makeAreaEditable function to work like so: when i click the edit button a textarea will apear with the li.value inside it. so i can edit the text(the button will also change from edit to ok). i want this in pure javascript </p>