fr********@yahoo.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.org/>
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><font 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='coolJulie(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="coolJulie(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.createElement('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.color = 'rgb(' + red +',' + green + ',' + blue + ')';
oPara.style.textAlign = 'center'; // center-align the P
oPara.style.fontSize = fsize; // set the size of the text
var oTxt = document.createTextNode(txt); // add the text
oPara.appendChild(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(firstval, big, small){
var i = firstval;
var txt = document.myForm.hi.value;
var tgt = document.getElementById('julieDiv');
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="coolJulie(1,5,1);">
</div>
</form>
<div id="julieDiv"></div>
</body>
</html>
--
Rob
