Lei Lionel Lei Lionel - 7 months ago 4
Javascript Question

Edit an information after clicking on an icon

I am working on a project since last week and I got to a part where I am supposed to provide an editable content for the user to edit some informations.

This is what I am trying to improve.



.setting {
display: block;
font-weight: normal;
padding: 7px 3px;
border-top: 1px solid #d6d1af;
margin-bottom: 5px;
}
.setting span {
float: left;
width: 250px;
font-weight: bold;
}
.setting img {
cursor: pointer;
float: right;
width: 30px;
height: 30px;
}

<section id="settings" class="hidden">
<p>Edit your user settings:</p>

<p class="setting"><span>Name </span> Prince Lionel N'zi <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p>

<p class="setting"><span>E-mail </span> lolno@gmail.com <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p>

<p class="setting"><span>Mobile Number </span> +233267689067 <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p>

<p class="setting"><span>Address </span> Weekly <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p>

<p class="setting"><span>Company Name </span> None <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p>

<p class="setting"><span>Telephone </span> +233267689067 <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p>
</section>





Please Let me know how I can make those two things. Thanks in advance

Answer

The CSS feature contenteditable can easily solve your problem as you are not good in javascript.

You can get more details here: contenteditable article

hope, It is helping.

Comments