change text of div using javascript

Question

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 on 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..

yes that was my ques. they told me to ask as another ques.please provide me some app.answer — SA.
– SA., Commented May 26, 2011 at 10:01

fearofawhackplanet · Accepted Answer · 2011-05-26 10:41:14Z

2

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

answered May 26, 2011 at 10:41

fearofawhackplanet

53.6k55 gold badges167 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AjayR · Accepted Answer · 2011-05-26 10:58:34Z

1

// 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>

answered May 26, 2011 at 10:58

AjayR

4,1894 gold badges49 silver badges81 bronze badges

Comments

sergio · Accepted Answer · 2011-05-26 11:04:00Z

1

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";

edited May 26, 2011 at 11:04

answered May 26, 2011 at 10:12

sergio

69k11 gold badges105 silver badges123 bronze badges

1 Comment

sergio Over a year ago

@kawade: indeed, there was no input field... I added one and also a save button...

Collectives™ on Stack Overflow

change text of div using javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related