change text of div using javascript

i have a div tag where i entered sime text. now i want, as the user clicks on the button, a cursor should pop-up and user edit the text. as user clicks o开发者_运维技巧n save button the text should displays min the div tag inplace of old text..

my div tag is as:

<div id="topdiv" style="color:Blue" onmouseover="button1();">
    <input type="button" id="btndiv" type="hidden" onclick="edit1();"/>
     Div Tag
    </div> 

here i want to have a cursor when user clicks edit button and as user ebters text and clicks save the ' div tag ' text should get replaced by new text..

how this can be done using java script..

What you are doing makes no sense from either a technical or semantic view. Just use a textarea.

<textarea id="content" value="sample text" disabled="true" /></textarea>
<input type="button" id="edit" value="edit" onClick="edit()" />
<input type="button" id="save" value="save" onClick="save()" />


function edit() {
    document.getElementById('edit').style.display = 'none';
    document.getElementById('save').style.display = 'block';
    document.getElementById('content').disabled = false;
}

function save() {
    document.getElementById('save').style.display = 'none';
    document.getElementById('edit').style.display = 'block';
    document.getElementById('content').disabled = true;
}

#content {
    width: 300px;
    height: 200px;
}

#edit, #save {
    padding: 2px;
    width: 50px;   
}

#save {
    display: none;   
}

Example here

// This sample code is with prompt (popup input) if you want to use textbox, the code to be replaced accordingly.

        <div id="topdiv" style="color:Blue" onmouseover="button1();">
            <input type="button" id="btndiv" style='display:hidden'  onclick="edit1();"/>
             <div id="text1"> </div>
            </div>
    <script>
    function button1()
    {
       document.getElementById ("btndiv").display = '';
    }

    function edit1()
    {
      var val = prompt ("Enter some value");
       document.getElementById ("text1").innerHTML = val;
       document.getElementById ("btndiv").display = 'hidden';
    }

</script>

I suggest creating an internal div enclosing just the text, like this:

<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="editbtndiv" onclick="edit1();" value="edit"/>
<input type="button" id="savebtndiv" onclick="save1();" value="save"/>
<input type="text" id="inputdiv" style="display:none;" />
<div id="divtext"> Div Tag </div>
</div> 

Then, to display the input field and hide the text:

var editObj = document.getElementById("editbtndiv");
editObj.style.display = "none";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "block";

var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "block";
var txtObj = document.getElementById("divtext");
txtObj.style.display = "none";

Then user does his job, clicks save and you can hide the input field and show the text:

var editObj = document.getElementById("editbtndiv");
editObj.style.display = "block";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "none";

var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "none";
var txtObj = document.getElementById("divtext");
txtObj.value = divObj.value;
txtObj.style.display = "block";