colemancb Posted December 5, 2007 Share Posted December 5, 2007 Hey there...Just fiddling around with an idea me and a buddy have, and what the site will require is users clicking a link, or a button, getting a prompt, and taking what the user entered and placing that data on the page after some modifications. Sounds simple, and I'm sure it is. But, in what I've read and tested out myself, everytime I use the document.write method, it overwrites the entire page instead of just adding on. After more reading, I thought that using the 'getElementbyID' and 'innerHTML' methods would solve my problem by placing the output inside a DIV, but no go. Anyone have any advice on this? Link to comment Share on other sites More sharing options...
gunsmokingman Posted December 5, 2007 Share Posted December 5, 2007 Hey there...Just fiddling around with an idea me and a buddy have, and what the site will require is users clicking a link, or a button, getting a prompt, and taking what the user entered and placing that data on the page after some modifications. Sounds simple, and I'm sure it is. But, in what I've read and tested out myself, everytime I use the document.write method, it overwrites the entire page instead of just adding on. After more reading, I thought that using the 'getElementbyID' and 'innerHTML' methods would solve my problem by placing the output inside a DIV, but no go. Anyone have any advice on this?I do not know if this is what you wanted but here is what it does.1\ Text box to add text2\ Submit button3\ A Div that set to be hiddenIf you press the submit button and the text box is empty it will say text needed messageIf the text box has text in it and you press the submit button below the text box whatyou have just type in will appear. Also the button text changes from submit to clearSave As Demo_ShowText.html<HTML></HEAD><TITLE>Demo - Show Text</TITLE> <STYLE Type='text/css'> .Text1 { Font-Family:verdana; Font-Size:8.05pt; Font-Weight:Bold; Color:#007373; } </STYLE> <script LANGUAGE='JScript'> function ShowText() { if(DisplayText.style.visibility=="hidden") { if(TBox1.value=="") { alert("Please Input Some Text"); } else { DisplayText.style.visibility="" DisplayText.innerHTML="<FONT CLASS='Text1'>"+ "Your Input Was » "+TBox1.value+"</FONT>"; Btn01.value='Clear' } } else { DisplayText.style.visibility="hidden"; Btn01.value='Submit' TBox1.value="" } } </SCRIPT> </HEAD><BODY><!-- Text Box --> <INPUT Type='TextBox' ID='TBox1' Class='Text1' Style='Color:#000060;Margin-Right:2px;'><!-- Button --> <INPUT Type='BUTTON' ID='Btn01' Class='Text1' Style='Height:21px;Width:63px;Color:#010101;' OnClick='ShowText()' value='Submit'><!-- Display Text --> <DIV ID='DisplayText' Style='visibility:hidden;position:absolute;Top:48;Left:48;'></DIV> </BODY></HTML> Link to comment Share on other sites More sharing options...
colemancb Posted December 6, 2007 Author Share Posted December 6, 2007 I appreciate the help, but I don't think I explained it well enough. I have some code below that basically does what I want, however, not exactly.What it will do is prompt the user, and print a string out on the page without overwriting everything on the page which is good, but I need the script to ADD to whatever is already on the page (so essentially, they could click on the 'google' image again, repeat the process, and a new line with their string would appear below the one created before it.<html><head><script type="text/javascript">function vaibhav(){var name=prompt("Please enter your name","Harry Potter")if (name!=null && name!=""){var document.createTextNode("Hello "+name+"!! How are you today??")var tname = document.getElementById("name")while (tname.firstChild) {tname.removeChild.firstChild}tname.appendChild(text);}}</script></head><body bgcolor="#000000" text="#FFFFFF"><div id="name"></div><img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="vaibhav()" /></body></html> Link to comment Share on other sites More sharing options...
gunsmokingman Posted December 6, 2007 Share Posted December 6, 2007 (edited) I could not get the code you posted to work. So I re wrote a new one for you to try.<HTML><HEAD><TITLE>Demo-Display User Input Text</TITLE> <STYLE Type='text/css'> BODY { Font-Size:8.95pt; Font-Weight:Bold; Font-Family:segoeui,helvetica,verdana,arial,Poor Richard; Color:#FFFFFF; BackGround-Color:#000000; } .B1 { Cursor:Hand; Width:69pt; Height:15pt; Font-Size:8.05pt; Font-Weight:Bold; Font-Family:segoeui,helvetica,verdana,arial,Poor Richard; Color:#005252; } </STYLE><script type="text/javascript"> var Var1=""//-> Open And Closes Input Box And Buttons function ShowInput() {if(InPut.style.visibility=="hidden") {InPut.style.visibility="";/* Show */} else {InPut.style.visibility="hidden";/* Close */}}//-> Check The Inputbox Values function CheckInput() {if(MyName.value=="") {alert('Error'+'\t'+'No User Input Detected');} else {Var1+="Hello "+MyName.value+"!! How are you today??<BR>" DisplayTheText();}} //-> Displays The Text function DisplayTheText(){Var1=Var1; Show.innerHTML=Var1+'<HR>';}</SCRIPT></HEAD><BODY><!-- Hidden Until The Google Img Is Clicked Start --> <DIV id="InPut" Style='visibility:hidden;position:absolute;top:16;Left:128;'><!-- Input --> <INPUT Type='TextBox' ID='MyName' NAME='MyName' Width='128'><BR><!-- Add Input Button --> <INPUT Type='Button' ID='TBtn01' Class='B1' OnMouseOver='this.style.color="#204080"' OnMouseOut='this.style.color=""' Value='Add Info' OnClick='CheckInput()'><BR><!-- Clear Text Box Button --> <INPUT Type='Button' ID='TBtn02' Class='B1' OnMouseOver='this.style.color="#204080"' OnMouseOut='this.style.color=""' Value='Clear TextBox' OnClick='MyName.value=""'><BR><!-- Clear Show Div Button --> <INPUT Type='Button' ID='TBtn03' Class='B1' OnMouseOver='this.style.color="#204080"' OnMouseOut='this.style.color=""' Value='Clear Display' OnClick='Show.innerHTML=""'> </DIV><!-- Hidden Until The Google Img Is Clicked End --><!-- Image And Text Display --> <TABLE><!-- Image To Click Or Change To A Button --> <IMG src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="ShowInput()" /><!-- Label --> <DIV Style='Text-Align:Center;'>Display User Input Text<HR></DIV><!-- Show All The Input Here --> <DIV ID="Show" ReadOnly=True></DIV> </TABLE><!-- --> </BODY> </HTML> Edited December 6, 2007 by gunsmokingman Link to comment Share on other sites More sharing options...
colemancb Posted December 7, 2007 Author Share Posted December 7, 2007 This works perfectly, thank you so much! Link to comment Share on other sites More sharing options...
gunsmokingman Posted December 8, 2007 Share Posted December 8, 2007 Glad I could help and your welcome. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now