473,699 Members | 3,103 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Is it possible to have rewrite html formatted text from a button click in javascript?

My daughter is playing around trying to learn JavaScript and she wrote
a small program that prints out a message in increasing and decreasing
font size and color changes. She is using document write and it works
fine until she puts it into a function and then calls the function from
a button with onClick. This also seems to work OK, with the exception
that the page is cleared, and the curser changes (and stays) as an
hourglass.

In reading some threads it seems that after the page is loaded,
subsequent calls to document.write cause the page to clear, so only
output is written and the button is lost.

In essence is there a way to do the following:

Have a input text filed and a button. Clicking the button writes out
formatted html below it. Clicking it again rewrites it out with new
values depending on the value in the input text.

Any ideas on how to do this easily would be appreciated.

Thanks in advance.

---Jay

Here is the code she wrote:

<html>
<script type="text/javascript">

function coolJulie (firstval, big, small){

var i = firstval
while (i < big) {
document.write( "<center><f ont size= "+ i +" color=" + i * i * i * i *
109684 + ">You Just Typed in: " + document.myForm .hi.value +
"</center></font><BR>");
i = i + 1
}
while (i > small) {
document.write( "<center><f ont align=center size= "+ i +" color=" + i
* i * i * i * 109684 + ">You Just Typed in: " +
document.myForm .hi.value + "</center></font><BR>");
i = i - 1
}
}

</script>

<body>
<form name='myForm'>
<br><br>
<center>
<b>
<font size=3 color='red'>Hi I'm so cooler then some people, maybe even
you!</font>
<br>
<input type=text name='hi' value='yoohoo'>
<input type=button name="ClickMe" value= 'Click Here if you're done
typing' onClick='coolJu lie(1,5,1);'>

</form>
</body>
</html>

Jul 23 '05 #1
4 3426
Hello

You might want to play with innerHTML.

<html>
<head>
<title> New Document </title>
<meta name="Generator " content="EditPl us">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Descripti on" content="">
</head>
<script language="JavaS cript">
<!--
function getElement(id)
{
if (document.getEl ementById)
return document.getEle mentById(id);
else if (document.all)
return document.all[id];
else
return document.layers[id];
}

function generateCoolJul ie(firstval, big, small, thetext)
{
var i = firstval;
var s = '';
for (i=firstval;i<b ig;i++)
{
s = s + "<center><f ont size= "+ i +" color=" + (i * i * i * i *
109684) + ">You Just Typed in: "
+ thetext
+ "</center></font><BR>";
}

while (i > small)
{
s = s + "<center><f ont align=center size= " + i +" color="
+ (i * i * i * i * 109684) + ">You Just Typed in: "
+ thetext
+ "</center></font><BR>";
i = i - 1
}

return s;
}

function changeMe(newTex t)
{
var o = getElement('hey ');
o.innerHTML = newText;
}

//easeb

//-->
</script>
<body>
<hr>
<span id="hey">Hello World!</span>
<hr>
<form>
Enter text: <input type="text" name="thetext" value="The text"><br>
<input type="button" value="change!"
onclick="change Me(generateCool Julie(1,5,1, this.form.thete xt.value));">
</form>
</body>
</html>
<fr********@yah oo.com> wrote in message
news:11******** *************@g 44g2000cwa.goog legroups.com...
My daughter is playing around trying to learn JavaScript and she wrote
a small program that prints out a message in increasing and decreasing
font size and color changes. She is using document write and it works
fine until she puts it into a function and then calls the function from
a button with onClick. This also seems to work OK, with the exception
that the page is cleared, and the curser changes (and stays) as an
hourglass.

In reading some threads it seems that after the page is loaded,
subsequent calls to document.write cause the page to clear, so only
output is written and the button is lost.

In essence is there a way to do the following:

Have a input text filed and a button. Clicking the button writes out
formatted html below it. Clicking it again rewrites it out with new
values depending on the value in the input text.

Any ideas on how to do this easily would be appreciated.

Thanks in advance.

---Jay

Here is the code she wrote:

<html>
<script type="text/javascript">

function coolJulie (firstval, big, small){

var i = firstval
while (i < big) {
document.write( "<center><f ont size= "+ i +" color=" + i * i * i * i *
109684 + ">You Just Typed in: " + document.myForm .hi.value +
"</center></font><BR>");
i = i + 1
}
while (i > small) {
document.write( "<center><f ont align=center size= "+ i +" color=" + i
* i * i * i * 109684 + ">You Just Typed in: " +
document.myForm .hi.value + "</center></font><BR>");
i = i - 1
}
}

</script>

<body>
<form name='myForm'>
<br><br>
<center>
<b>
<font size=3 color='red'>Hi I'm so cooler then some people, maybe even
you!</font>
<br>
<input type=text name='hi' value='yoohoo'>
<input type=button name="ClickMe" value= 'Click Here if you're done
typing' onClick='coolJu lie(1,5,1);'>

</form>
</body>
</html>

Jul 23 '05 #2
Thanks lallous,

After fixing some line break problems from the newreader, it worked
like a charm and it will be something I can easily explain.

---Jay

Jul 23 '05 #3
fr********@yaho o.com wrote:
My daughter is playing around trying to learn JavaScript and she wrote
a small program that prints out a message in increasing and decreasing
font size and color changes. She is using document write and it works
fine until she puts it into a function and then calls the function from
a button with onClick. This also seems to work OK, with the exception
that the page is cleared, and the curser changes (and stays) as an
hourglass.

In reading some threads it seems that after the page is loaded,
subsequent calls to document.write cause the page to clear, so only
output is written and the button is lost.

In essence is there a way to do the following:

Have a input text filed and a button. Clicking the button writes out
formatted html below it. Clicking it again rewrites it out with new
values depending on the value in the input text.

Any ideas on how to do this easily would be appreciated.

Thanks in advance.

---Jay

Here is the code she wrote:
If she is going to learn, she may as well get it right from the start.
One of the most important things to get right is validating the HTML
source code - there is a free validator at w3.org:

<URL:http://validator.w3.or g/>

The page that was posted will cause a series of errors, but once you
fix them you'll know that your page is now a much, much better piece of
work.

<html>
You should always include a doctype. Browsers may display your page
differently depending on the doctype specified. Without one, you are
trusting to luck. Since HTML 4.01 has been around for 5 years now, it
seems reasonable to use that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">



<script type="text/javascript">
<head> tags aren't mandatory, but it's always handy to have them.
Browsers will insert a head element where they think it's appropriate,
but why leave it to luck that they'll be in the right place? A
<title> element is required, it's generally good to put them in right
below the opening HTML tag:

<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

function coolJulie (firstval, big, small){
var i = firstval
while (i < big) {
document.write( "<center><f ont size= "+ i +" color=" + i * i * i * i *
When you write into the document, you should use good quality HTML.
'font' is depreciated, so use 'style' instead.

The intention seems to be to increase the size of the font by some
increment. Rather than the old font sizes, percentages can be used
based on steps of say 5%, so font-size can be increased:

font-size = 100 + ( i*5) + '%';

Similarly for the colour, which is specified with three values, one
each for red, green and blue (rgb) in a range from 0 to 255. The usual
way is to use hexidecimal values (#a3f523 or such) but to save a lot of
work, we can use rgb(x, y, z) instead, e.g. rgb(255,0,0) will be red.

Here is some code that creates some random colours for the text:

var red = Math.floor(Math .random()*256);
var green = Math.floor(Math .random()*256);
var blue = Math.floor(Math .random()*256);
109684 + ">You Just Typed in: " + document.myForm .hi.value +
"</center></font><BR>");
So now the script so far looks like:

function coolJulie (firstval, big, small){
var i = firstval
while ( i < big ) {
var fontsize = 100 + ( i*5) + '%';
var red = Math.floor(Math .random()*256);
var green = Math.floor(Math .random()*256);
var blue = Math.floor(Math .random()*256);
document.write( '<p style="',
'font-size: ' + fontsize + ';',
'color: ' + 'rgb(' + red +',' + green +',' + blue + ');',
'text-align: center;',
'">',
'You Just Typed in: ' + txt,
'</p>');
i = i + 1
This can be written:

i++;
}
while (i > small) {
This one can be the reverse of the above:

while ( i > small ) {
var fontsize = 100 + ( i*5) + '%';
var red = Math.floor(Math .random()*256);
var green = Math.floor(Math .random()*256);
var blue = Math.floor(Math .random()*256);
document.write( '<p style="',
'font-size: ' + fontsize + ';',
'color: ' + 'rgb(' + red +',' + green +',' + blue + ');',
'text-align: center;',
'">',
'You Just Typed in: ' + txt,
'</p>');
i--;
}

[...]
<body>
<form name='myForm'>
<br><br>
<center>
<b>
<font size=3 color='red'>Hi I'm so cooler then some people, maybe even
you!</font>
<br>
<input type=text name='hi' value='yoohoo'>
<input type=button name="ClickMe" value= 'Click Here if you're done
typing' onClick='coolJu lie(1,5,1);'>
When putting quotes inside other quotes, you need to be careful. You
can put single quotes inside doubles, or doubles inside singles, but
beyond that it gets more complicated:

<input type=button name="ClickMe" value="Click Here if you're done
typing" onClick="coolJu lie(1,5,1);">

I like to use doubles in HTML and single in JavaScript, but it's up to
you.

</form>
</body>
</html>


Since you don't want to delete your document content all the time, you
could use innerHTML to write to the page, but using the document object
model is easier, you write to the elements rather than changing the
underlying HTML source. It's also better to split out some of the
logic into separate functions. Here's a solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Coloured text </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

// This writes the paragraph to the page in random colours:
function writePara( fsize, txt, tgt ) {
var oPara = document.create Element('P'); // Create a P element
var red = Math.floor(Math .random()*256); // random red value
var green = Math.floor(Math .random()*256); // random green value
var blue = Math.floor(Math .random()*256); // random blue value
oPara.style.col or = 'rgb(' + red +',' + green + ',' + blue + ')';
oPara.style.tex tAlign = 'center'; // center-align the P
oPara.style.fon tSize = fsize; // set the size of the text
var oTxt = document.create TextNode(txt); // add the text
oPara.appendChi ld(oTxt); // add the text to the P
tgt.appendChild (oPara); // add the P to the document
}

// This removes the content of an element:
function deleteChildren( tgt ){
while ( tgt.firstChild ) {
tgt.removeChild (tgt.firstChild );
}
}

// This decides what to write where:
function coolJulie(first val, big, small){
var i = firstval;
var txt = document.myForm .hi.value;
var tgt = document.getEle mentById('julie Div');
deleteChildren( tgt);
while ( i < big ) {
var fontsize = 100 + ( i*10) + '%';
writePara( fontsize, txt, tgt);
i++;
}
while ( i >= small ) {
var fontsize = 100 + ( i*30) + '%';
writePara( fontsize, txt, tgt);
i--;
}
}
</script>
<body>
<form name="myForm" action="">
<div style="text-align: center; color: red; font-weight: bold;
background-color: white;
">Hi I'm so cooler then some people, maybe even you<br>
<input type="text" name="hi" value="yoohoo">
<input type="button" name="ClickMe"
value="Click here when you're finished typing"
onclick="coolJu lie(1,5,1);">
</div>
</form>
<div id="julieDiv"> </div>

</body>
</html>


--
Rob
Jul 23 '05 #4
JRS: In article <11************ *********@g44g2 000cwa.googlegr oups.com>,
dated Sat, 25 Jun 2005 19:03:59, seen in news:comp.lang. javascript,
fr********@yaho o.com posted :

In essence is there a way to do the following:

Have a input text filed and a button. Clicking the button writes out
formatted html below it. Clicking it again rewrites it out with new
values depending on the value in the input text.

Any ideas on how to do this easily would be appreciated.


Take a copy of <URL:http://www.merlyn.demo n.co.uk/js-quick.htm>.

Insert Div.innerHTML = "A<big>B<big>C< big>D</big>E</big>F</big>G"
in the textarea F.Code; press the "Eval" button.

Then simplify so that eval is not used and the button directly executes
Div.innerHTML = F.Code.value

Then remove all else that you do not need, and read FAQ 4.49 & notes.

Alternatively, see FAQ 4.15.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
5171
by: KathyB | last post by:
Hi, I'm trying to find a way to validate input text boxes where I don't know the names until the page is rendered. I've got 2 validate functions that fire with the onsubmit button of a "mini" form within the html document. When the Finish button is clicked, I need to check for any empty input boxes before loading the next aspx page...but it could be no boxes or five boxes, etc.? I've included my html output...if you have any ideas,...
6
4031
by: Stefan Mueller | last post by:
The following code (HTML) generates a table. Now I'd like to insert a new row by a javascript. The following code (javascript) works with the Internet Explorer and also with Mozilla. However, the inserted button (onClick) in the table does not work with the Internet Explorer. It only works with Mozilla. I'm trying the whole Sunday without any success. Please give me a hint. Stefan
17
2479
by: Lloyd Sheen | last post by:
This IDE is driving me nuts. I needed another button so I copied an existing one, changed the Text and the id and position by drag and drop. Well then I run and get the following: Control 'Button19' of type 'Button' must be placed inside a form tag with runat=server Can the IDE not do what it is supposed to do. It seems that it is a fight to make it do anything or did I do something wrong? It would seem silly to have to create a...
3
1882
by: Luqman | last post by:
How can I retrieve text from html file and write to textbox. Best Regards, Luqman
9
2778
by: Neo Geshel | last post by:
I have strip-mined, strip-searched, and completely exhausted the Internet (up to the 30th page on Google, with 100 results per page!!), all without finding an answer to my question AS TO WHY IT IS IMPOSSIBLE TO PROGRAMMATICALLY ADD A BUTTON TO A DYNAMICALLY CREATED PAGE. Or, to be more precise, why it is impossible to have an onClick sub respond to that button’s Click event. My main page has only one line:
29
1777
by: Richard Lionheart | last post by:
Hi All, I've taken the advice of a few people and managed to cobble together an HTML 4.01 Strict-compliant document (according to the W3C Validation Service), but the way I try to pass a TextArea object to a script function doesn't work. What's the least amount of change I can make to this to remain compliant but also correct for execution?
21
8149
by: Ben | last post by:
Hello I have frames set up in an asp.net application and need one frame to refresh another. Seeing as events need to be registered at the time the page is sent from the server, I was wondering if I could place a hidden button in a frame that would have the attribute to refresh the other. I would need code to "invoke" the onclick event (ie i need code to click the button). is this possible? thanks.
0
2381
by: bruce | last post by:
hi... it appears that i'm running into a possible problem with mechanize/browser/python rgarding the "select_form" method. i've tried the following and get the error listed: br.select_form(nr = 1) br.select_form(name="foo") br.select_form(name=foo) br.select_form(name="foo")
2
10719
by: Sreenath Rao Nellutla | last post by:
Hai all, I am trying to create dropdown calendar control with HTML input control by writing JavaScript. But while executing I am getting the error as "Error on Page" on the status bar of the browser. I wrote the following code in the HTML code for the web form: <%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="calendar.WebForm2" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML>...
0
8704
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8623
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9187
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9053
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
7776
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6540
isladogs
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4390
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4636
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2015
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.