Jump to content
MSFN is made available via donations, subscriptions and advertising revenue. The use of ad-blocking software hurts the site. Please disable ad-blocking software or set an exception for MSFN. ×

Small Javascript Question


Recommended Posts

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


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 text

2\ Submit button

3\ A Div that set to be hidden

If you press the submit button and the text box is empty it will say text needed message

If the text box has text in it and you press the submit button below the text box what

you have just type in will appear. Also the button text changes from submit to clear

Save 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

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

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 by gunsmokingman
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.


×
×
  • Create New...