Using javascript to change content [Archive]

JavascriptFromS

03-08-2008, 04:51 PM

Hi,
I was trying to create a script to calculate the Orthodox Easter. I've done the algorithm OK but when I try to print the result it doesn't stay persistent but disappears immediately. I've separated the code to two files easter.js and easter.html. I'll give the code for the HTML part for know because the other code (easter.js) is a little bit big. But if needed it is in your disposal.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8>
<script src='easter.js'>
</script>
<title>
Υπολογισμός ορθοδόξου Πάσχα
</title>
</head>
<body id="allparas">
<script>
function main()
{
x=parseInt(document.forms[0].elements[0].value);
y=easter_calc(x);
myp=document.getElementById("allparas");
another=document.createElement("p");
myp.appendChild(another);
another.innerHTML=y.day+"/"+y.month

}
</script>
<center><P>Βάλε τον χρόνο για να υπολογιστεί το Πάσχα</P>
<form>
<input id='year' type='text' size=4>
<input type='submit' value='Υπολογισμός' onclick="main()">
</form>
</center>
</body>
</html>

Please tell me what to do in order the result to be persistent.
Thank you.

chud_wallice

03-08-2008, 07:29 PM

take the onclick handler off the submit button.

add an onsubmit handler to your form tag.
You also need to return false somewhere as you don't want the form to submit. You can do this in the main function or in the onsubmit handler.

<form onsubmit="main();return false;">

or

function main()
{
x=parseInt(document.forms[0].elements[0].value);
y=easter_calc(x);
myp=document.getElementById("allparas");
another=document.createElement("p");
myp.appendChild(another);
another.innerHTML=y.day+"/"+y.month; return false;

}

JavascriptFromS

03-08-2008, 07:48 PM

Thank you for your answer, but unfortunately it didn't work.
Any ideas?

oesxyl

03-08-2008, 09:23 PM

<body id="allparas">
<p id="ins"></p>
<script>
function main()
{
x=parseInt(document.forms[0].elements[0].value);
y=easter_calc(x);
myp=document.getElementById("allparas");
another = document.getElementById('ins');
if(another.style.display == 'none'){
another.style.display = 'block';
}
// another=document.createElement("p");
// myp.appendChild(another);
another.innerHTML =+ y.day+"/"+y.month + '<br/>;

}
</script>
<center><P>Βάλε τον χρόνο για να υπολογιστεί το Πάσχα</P>
<form>
<input id='year' type='text' size=4>
<input type='submit' value='Υπολογισμός' onclick="main()">
</form>
</center>
</body>

I don't know how appendChild, createChild work, and until somebody give you a solution, try this one.
you must put in css a declaration:

#ins { display: none; }

I hope this help.

not tested

JavascriptFromS

03-09-2008, 11:22 AM

i i i i i i i i i i i i i i

JavascriptFromS

03-09-2008, 02:46 PM

<body id="allparas">
<p id="ins"></p>
<script>
function main()
{
x=parseInt(document.forms[0].elements[0].value);
y=easter_calc(x);
myp=document.getElementById("allparas");
another = document.getElementById('ins');
if(another.style.display == 'none'){
another.style.display = 'block';
}
// another=document.createElement("p");
// myp.appendChild(another);
another.innerHTML =+ y.day+"/"+y.month + '<br/>;

}
</script>
<center><P>Βάλε τον χρόνο για να υπολογιστεί το Πάσχα</P>
<form>
<input id='year' type='text' size=4>
<input type='submit' value='Υπολογισμός' onclick="main()">
</form>
</center>
</body>

I don't know how appendChild, createChild work, and until somebody give you a solution, try this one.
you must put in css a declaration:

#ins { display: none; }

I hope this help.

not tested
Thank you for your answer but it didn't work.

oesxyl

03-09-2008, 03:41 PM

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<script type="text/javascript" src="easter.js"></script>
</head>
<body id="allparas">
<p id="ins"></p>
<script type="text/javascript">
function compute()
{
x=parseInt(document.forms[0].elements[0].value);
// y=easter_calc(x);
y = new Date();
year = y.getFullYear();
month = y.getMonth();
day = y.getDate();
// myp=document.getElementById("allparas");
another = document.getElementById('ins');
if(another.style.display == 'none'){
another.style.display = 'block';
}
// another=document.createElement("p");
// myp.appendChild(another);
another.innerHTML += year + '/' + month + '/' + day + '<br/>';
}
</script>
<p>prolog</p>
<div>
<form method="post" action="">
<div>
<input id='year' type='text' size="4"/>
<input type='button' value='button name' onclick="compute()"/>
</div>
</form>
</div>
</body>
</html>

this is tested and work, sorry that I didn't do it before. You have invalid html markup, in order to work at least some of them must be fixed. I don't know how the html encoding affect javascript but that could be a issue, try to use the proper encoding for greek.
Also I don't have and obvious I don't test with easter.js, be sure that it easter_calc function return a object of type Date.

best regards

JavascriptFromS

03-09-2008, 03:58 PM

The only thing that I had to do in order to make it work was to change the type from 'submit' to 'button'.

oesxyl

03-09-2008, 04:04 PM

The only thing that I had to do in order to make it work was to change the type from 'submit' to 'button'.
yes but if you don't fix markup and js codding, is possible to don't work if you change the context, because browsers are forced to guess what you want.
There are allready enought problems between browsers/os even your code is valid and work. :)

best regards