/    Sign up×
Community /Pin to ProfileBookmark

HTML code in "getElementById"

Copy linkTweet thisAlerts:
Apr 01.2009

I have a Div that i would like to display a different piece of html code if a button is pressed. Can someone point me in the right direction on how to do this?

[code=html]<div id=”thediv”>Hey guys!</div>

<input type=”button” onClick=”document.getElementById(‘thediv’).innerHTML = ‘Dude!’;”>[/code]

For example in the above piece of code how can i have ‘Dude’ represent a piece of HTML code like a form.

Thanks in advance

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledApr 01.2009 — you can place html code inside a string but the more html code you need, probably the more complex become the to understand and debug the code. that is, you can do...
<i>
</i>[i]element[/i].innerHTML = "&lt;form action='page.php' method='post'&gt;&lt;input type='text' /&gt; put as many elements needed inside the string.&lt;/form&gt;";


consider that doing so can arise problem in some cases.
Copy linkTweet thisAlerts:
@JMRKERApr 01.2009 — You would not have to write to the element with .innerHTML

if you wanted to approach the problem from a slightly different direction.

See if this makes sense to you. Fairly easy to modify.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;DIV displays&lt;/title&gt;
&lt;script type="text/javascript"&gt;
// For: http://www.webdeveloper.com/forum/showthread.php?t=205940

var IDlist = ['','Car','Boat','Plane'];

function ShowReg(op) {
var info = '';
for (var i=1; i&lt;IDlist.length; i++) {
info = 'choice'+IDlist[i]; <br/>
document.getElementById(info).style.backgroundColor='white';
document.getElementById(IDlist[i]).style.display='none';
}
info = 'choice'+IDlist[op];
document.getElementById(info).style.backgroundColor='cyan';
document.getElementById(IDlist[op]).style.display="block";
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h3&gt;Select registration type&lt;/h3&gt;
&lt;div style="width:400px; height:75px; border:3px solid red"&gt;
&lt;div id="choiceCar" onclick="ShowReg(1)" style="width:100px;float:left;"&gt;Car&lt;/div&gt;
&lt;div id="choiceBoat" onclick="ShowReg(2)" style="width:100px;float:left;"&gt;Boat&lt;/div&gt;
&lt;div id="choicePlane" onclick="ShowReg(3)" style="width:100px;float:left;"&gt;Plane&lt;/div&gt;
&lt;div style="clear:both"&gt;&lt;/div&gt;
&lt;P&gt;

&lt;div id="Car" style="display:none"&gt;
VIN No. &lt;input type="text" id="VIN" value=""&gt;
&lt;/div&gt;
&lt;div id="Boat" style="display:none"&gt;
Registration No. &lt;input type="text" id="Breg" value=""&gt;
&lt;/div&gt;
&lt;div id="Plane" style="display:none"&gt;
Tail No. &lt;input type="text" id="Ptail" value=""&gt;
Model &lt;input type="text" id="Pmodel" value=""&gt;
&lt;/div&gt;
&lt;/div&gt;
Additional page information.
&lt;/body&gt;
&lt;/html&gt;

?
Copy linkTweet thisAlerts:
@JimwalksauthorApr 01.2009 — You would not have to write to the element with .innerHTML

if you wanted to approach the problem from a slightly different direction.

See if this makes sense to you. Fairly easy to modify.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;DIV displays&lt;/title&gt;
&lt;script type="text/javascript"&gt;
// For: http://www.webdeveloper.com/forum/showthread.php?t=205940

var IDlist = ['','Car','Boat','Plane'];

function ShowReg(op) {
var info = '';
for (var i=1; i&lt;IDlist.length; i++) {
info = 'choice'+IDlist[i]; <br/>
document.getElementById(info).style.backgroundColor='white';
document.getElementById(IDlist[i]).style.display='none';
}
info = 'choice'+IDlist[op];
document.getElementById(info).style.backgroundColor='cyan';
document.getElementById(IDlist[op]).style.display="block";
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h3&gt;Select registration type&lt;/h3&gt;
&lt;div style="width:400px; height:75px; border:3px solid red"&gt;
&lt;div id="choiceCar" onclick="ShowReg(1)" style="width:100px;float:left;"&gt;Car&lt;/div&gt;
&lt;div id="choiceBoat" onclick="ShowReg(2)" style="width:100px;float:left;"&gt;Boat&lt;/div&gt;
&lt;div id="choicePlane" onclick="ShowReg(3)" style="width:100px;float:left;"&gt;Plane&lt;/div&gt;
&lt;div style="clear:both"&gt;&lt;/div&gt;
&lt;P&gt;

&lt;div id="Car" style="display:none"&gt;
VIN No. &lt;input type="text" id="VIN" value=""&gt;
&lt;/div&gt;
&lt;div id="Boat" style="display:none"&gt;
Registration No. &lt;input type="text" id="Breg" value=""&gt;
&lt;/div&gt;
&lt;div id="Plane" style="display:none"&gt;
Tail No. &lt;input type="text" id="Ptail" value=""&gt;
Model &lt;input type="text" id="Pmodel" value=""&gt;
&lt;/div&gt;
&lt;/div&gt;
Additional page information.
&lt;/body&gt;
&lt;/html&gt;

?[/QUOTE]

Awesome, That's exactly what I was looking for! Thank you ?
Copy linkTweet thisAlerts:
@JMRKERApr 01.2009 — You're most welcome.

Glad I could help.

Good Luck!

?
Copy linkTweet thisAlerts:
@thesprucegooseApr 01.2009 — http://www.tizag.com/javascriptT/javascript-innerHTML.php

this might also help you out.

--thesprucegoose
×

Success!

Help @Jimwalks spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...