i have the following 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 = "";
}
};
And the following html:
<textarea id="usertext"></textarea>
<button onClick="appendText()">Add text </button>
<div id="addedText" style="float:left">
</div>
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
i have the following 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 = "";
}
};
And the following html:
<textarea id="usertext"></textarea>
<button onClick="appendText()">Add text </button>
<div id="addedText" style="float:left">
</div>
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
Share Improve this question asked Jan 16, 2013 at 8:33 emcee22emcee22 1,8896 gold badges23 silver badges32 bronze badges 3-
1
Also You could give us
jsfiddlelink it will be the best way to start – bumerang Commented Jan 16, 2013 at 8:39 - the li will apear after i click the add text button witch will trigger the appendText function. a li with the edit button will apear under the textarea – emcee22 Commented Jan 16, 2013 at 8:40
- jsfiddle/vUpSz here is the link.. so when i press edit i want the value to apear on a textarea on the same line as the edit.. and the edit to transform in ok so i can then make another function to save the edit on every line – emcee22 Commented Jan 16, 2013 at 8:49
3 Answers
Reset to default 1If you add 2 elements (click the addtext 2 times) or more, they all have the same id (button_clic). So don't think the code
document.getElementByID("button_click").value
will work.
2nd you are creating a div element var div and you add li element to that div. But afterwards you do nothing with it because you assign the li direclty to the bigdiv
And with regards to my last ments, you have to create your functions and then afterwards add them to the element. Now you do it the otherway around, you assign a function to an element and then define the function. And you have to add textareaEdit to an element. Otherwise it will never show on page.
your code should look like this
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);
var makeAreaEditable = function(){
function myFunction(e){
var objLi = e.currentTarget;
objLi.value = objLi.customProperty;
document.getElementByID("button_click").value = "ok";
};
var textareaEdit = document.createElement('textarea');
textareaEdit.customProperty = li.value;
textareaEdit.onclick = myFunction;
bigdiv.appendChild(li).appendChild(textareaEdit);
};
editbutton.onclick = makeAreaEditable;
bigdiv.appendChild(li).appendChild(texty);
bigdiv.appendChild(li).appendChild(editbutton);
document.getElementById('usertext').value = "";
}
};
updated code
function appendText(){
var text = document.getElementById('usertext').value;
if ( text ){
var li = document.createElement('li');
li.setAttribute('id', 'list');
li.innerHTML=text;
li.customProperty = text;
var editbutton = document.createElement('BUTTON');
editbutton.setAttribute('id', 'button_click');
editbutton.setAttribute('value','Edit');
editbutton.innerHTML='Edit';
var makeAreaEditable = function(){
function myFunction(e){
var objLi = e.currentTarget;
objLi.value = objLi.customProperty;
document.getElementById("button_click").value = "ok";
document.getElementById("button_click").innerHTML='ok';
};
var textareaEdit = document.createElement('textarea');
textareaEdit.customProperty = li.customProperty;
textareaEdit.onclick = myFunction;
li.appendChild(textareaEdit);
};
editbutton.onclick = makeAreaEditable;
var bigdiv = document.getElementById('addedText');
li.appendChild(editbutton);
bigdiv.appendChild(li);
document.getElementById('usertext').value = "";
}
};
Alright, there were a couple of things...
First, i've changed this line:
if ( document.getElementById('usertext').value ){
To this:
if ( text ).value ){
I've added the ID to the button:
<button onClick="appendText()" id="button_click">Add text </button>
And pushed this line lower:
editbutton.onclick = makeAreaEditable;
Workable jsfiddle can you find here: JSFIDDLE