473,397 Members | 2,068 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > change a <p> element into an <input> element through onclick.

Join Bytes to post your question to a community of 473,397 software developers and data experts.

Change a <p> element into an <input> element through onclick.

Markus
6,050 Expert 4TB
The place i noticed this was on MySpace (sorry - i am ashamed).

When you look at your photos they have the caption underneath. If you then click on that caption (which looks like a normal paragraph) it then changes into a textarea where you can change the caption and thus update it.

Will this be done through the changing of elements? Is that even possible?

Thanks :)
Jan 1 '08 #1
1 1323
gits
5,390 Expert Mod 4TB
hi ...

you could do something like this:

[HTML]
<html>
<head>

<script type="text/javascript">
function replace_element(node) {
var new_node = document.createElement('input');
var container = document.getElementsByTagName('body')[0];

new_node.id = node.id + '_inp';
new_node.value = node.innerHTML;

container.replaceChild(new_node, node);
}
</script>

</head>
<body>
<p onclick="replace_element(this);">make input</a>
</body>
</html>
[/HTML]
kind regards
Jan 2 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

4
Use of [ and ] within id or name attribute of <input /> tag
by: Martin Lucas-Smith | last post by:
I am wanting to know whether are XHTML1-valid characters for use within an id attribute and/or a name attribute. ...
HTML / CSS
3
CSS with <INPUT><LABEL></LABEL></INPUT>
by: TR | last post by:
Is it possible with CSS to prevent this wrapping alignment with a checkbox with a nested label? This is the label of the checkbox that wraps beneath it I'd prefer it looked like...
HTML / CSS
5
Remove value of input element onfocus
by: Max | last post by:
I've got a default value of some text in an input element when a page loads. What I'd like to do is have the value disappear when the user clicks in the input field. I've figured out I can use:...
Javascript
5
[scriptaculous] dragging and <input> field
by: Bart van Deenen | last post by:
Hi all I have a form with a couple of input fields, embedded within spans. I am using script.aculo.us for dragging and dropping, and want to reorder the input fields that way. The input fields are...
Javascript
2
changing focus to next input element
by: yawnmoth | last post by:
Say I have two input elements and that I wanted to make it so that when the first ones input was what it should be, the focus would automatically be shifted to the next input element. ie....
Javascript
4
How Can an <input> tag be made visible or hidden dynamically
by: Rick | last post by:
I'm trying to make an input tag visible or hidden based on the value of another input tag, so that when the 1st input tag is changed in anyway, the 2nd input tag will become visible. Thanks in...
HTML / CSS
2
Hiding <DIV> containing <INPUT> tags onmouseout
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given...
Javascript
1
XSLT: Transforming HTML Input Element's Values
by: MaggotChild | last post by:
Hi, I'm trying to transform the values entered into a form: HTML: <div id="container"> <div id="bs"> <input id="name" type="text"/> <p>PPPPP</p> <a href="#" onclick="return transform()">Do...
Javascript
2
form </input> validation
by: jp2code | last post by:
I have several input fields on my form, and the form works; however, Visual Studio is showing errors, and I would like to get rid of them. When the form is submitted, it is redirected back to...
ASP / Active Server Pages
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!