PDA

View Full Version : need script for this:

phoenix1215
Feb 22nd, 2007, 09:31 PM
Hello everyone, I'm needing a basic calculator script with some twists to it...

I need to have a form where a member enters their moon position - which is a number

then when they click submit, the form calculates the actual phase

if the number they enter is >180 it first subtracts 157.5 then divides by 22.5 and rounds up or down

if the number they enter is <180 it adds 202.5 then divides by 22.5 and rounds up or down

the answer is provided as both a number and an image - but I can easily add that no problem...

I've hunted everywhere for a script, but can't find one because I'm really not sure what it would even be called..

If anyone can help me with this by either pointing me in the right direction or whatever, please let me know, I'm going to start working on the basics to it though

~phoenix

Arbitrator
Feb 22nd, 2007, 10:02 PM
Try something like this:

JavaScript\:

function calculate(position) {
var phase;
position = parseFloat(position);
if (position > 180) {
phase = Math.round((position - 157.5) / 22.5);
}
else if (position < 180) {
phase = Math.round((position - 202.5) / 22.5);
}
else {
var text = document.createTextNode("You must enter a number!");
document.getElementsByTagName("div")[0].appendChild(text);
}
}

// Do Something
}

HTML:

<div>
<input type="text" id="position">
<input type="submit" onclick="calculate('position');">
</div>

phoenix1215
Feb 22nd, 2007, 10:41 PM
I did try that, without any changes to see it in action, in the backend of my site all I ever get whenever I enter something is that I need to enter a number and no matter what it just repeats that over and over again, writing it over and over again...

I just don't know enough about javascript for squat

Arbitrator
Feb 22nd, 2007, 10:48 PM
I did try that, without any changes to see it in action, in the backend of my site all I ever get whenever I enter something is that I need to enter a number and no matter what it just repeats that over and over again, writing it over and over again...

I just don't know enough about javascript for squatThere’s a mistake in the script: calculate('position') should read calculate(document.getElementById('position').value). The script itself is partial though and not designed to do anything out of the box.

phoenix1215
Feb 22nd, 2007, 10:57 PM
alrighty then, well thanks for the help

phoenix1215
Feb 23rd, 2007, 12:37 AM
There’s a mistake in the script: calculate('position') should read calculate(document.getElementById('position').value). The script itself is partial though and not designed to do anything out of the box.

I played around with this and it completely disabled it, I'm lost... and I don't even know where to begin

tonyp12
Feb 23rd, 2007, 01:52 AM
here in one in two lines of code.

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

function moon(){
var pos= parseFloat(document.getElementById('pos').value)
document.getElementById('pos').value= (Math.round(pos > 180 ? (pos-157.5)/22.5 : (pos+202.5)/22.5) || "enter a number")
}

</script>
<body>
<input type="text" id="pos">
<input type="submit" onclick="moon()">

</body>
</html>

phoenix1215
Feb 23rd, 2007, 02:01 AM
here in one in two lines of code.

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

function moon(){
var pos= parseFloat(document.getElementById('pos').value)
document.getElementById('pos').value= (Math.round(pos > 180 ? (pos-157.5)/22.5 : (pos+202.5)/22.5) || "enter a number")
}

</script>
<body>
<input type="text" id="pos">
<input type="submit" onclick="moon()">

</body>
</html>

omg! that's awesome! thank you so much, do you know how I could get the answer to show up beneath the input box?

tonyp12
Feb 23rd, 2007, 02:36 AM
change the second line of code so it starts with:
document.getElementById('answ').innerHTML=

<br>The answer is : <span id="answ"></span>

phoenix1215
Feb 23rd, 2007, 02:44 AM
change the second line of code to:
document.getElementById('answ').innerHTML=

<br>The answer is : <span id="answ"></span>

very very cool... you are the man!!!

I was going out of my mind trying to figure out that on earth was going on with that other code, though it was giving me a very good idea of how things work, except that I couldn't get it to do anything other than say "You must enter a number!"

Arbitrator
Feb 23rd, 2007, 02:58 AM
*sigh* Invalid HTML and proprietary code. Below demonstrates another way of doing it with correct code. If you’re interested in what all this stuff is doing, try reading QuirksMode: W3C DOM Compatibility - Core (http://www.quirksmode.org/dom/w3c_core.html).

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

<html lang="en-US">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="Author" content="Patrick Garies">
<title>HTML 4.01 Strict Document</title>

<style type="text/css">
* { margin: 0; }
.NaN { color: red; }
.phase { color: green; }
</style>

<script type="text/javascript">
function calculateMoonPhase(position) {
// Variables
var phase, calculator = document.getElementById("MoonPhaseCalculator");
position = parseFloat(document.getElementById("MoonPosition").value);

// Delete Existing Output
if (calculator.lastChild.firstChild) {
calculator.removeChild(calculator.lastChild);
}

/* If the value is a number, calculate the phase.
Otherwise, tell the user to enter a numerical value. */
if (position > 180) {
phase = Math.round((position - 157.5) / 22.5);
}
else if (position < 180) {
phase = Math.round((position - 202.5) / 22.5);
}
else if (position == isNaN) {
var output = document.createElement("div");
output.className = "NaN";
output.appendChild(document.createTextNode("You must enter a number!"));
calculator.appendChild(output);
}

/* If the value was a number, output the calculation. */
if (position != isNaN) {
var output = document.createElement("div");
output.className = "phase";
output.appendChild(document.createTextNode("The phase is " + phase + "."));
calculator.appendChild(output);
}
}
</script>

<body>

<div id="MoonPhaseCalculator">
<label for="MoonPosition">Input Moon Position:</label>
<input type="text" id="MoonPosition">
<input type="submit" onclick="calculateMoonPhase()">
</div>

</body>
</html>

phoenix1215
Feb 23rd, 2007, 03:09 AM
*sigh* Invalid HTML and proprietary code. Below demonstrates another way of doing it with correct code. If you’re interested in what all this stuff is doing, try reading QuirksMode: W3C DOM Compatibility - Core (http://www.quirksmode.org/dom/w3c_core.html).

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

<html lang="en-US">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="Author" content="Patrick Garies">
<title>HTML 4.01 Strict Document</title>

<style type="text/css">
* { margin: 0; }
.NaN { color: red; }
.phase { color: green; }
</style>

<script type="text/javascript">
function calculateMoonPhase(position) {
// Variables
var phase, calculator = document.getElementById("MoonPhaseCalculator");
position = parseFloat(document.getElementById("MoonPosition").value);

// Delete Existing Output
if (calculator.lastChild.firstChild) {
calculator.removeChild(calculator.lastChild);
}

/* If the value is a number, calculate the phase.
Otherwise, tell the user to enter a numerical value. */
if (position > 180) {
phase = Math.round((position - 157.5) / 22.5);
}
else if (position < 180) {
phase = Math.round((position - 202.5) / 22.5);
}
else if (position == isNaN) {
var output = document.createElement("div");
output.className = "NaN";
output.appendChild(document.createTextNode("You must enter a number!"));
calculator.appendChild(output);
}

/* If the value was a number, output the calculation. */
if (position != isNaN) {
var output = document.createElement("div");
output.className = "phase";
output.appendChild(document.createTextNode("The phase is " + phase + "."));
calculator.appendChild(output);
}
}
</script>

<body>

<div id="MoonPhaseCalculator">
<label for="MoonPosition">Input Moon Position:</label>
<input type="text" id="MoonPosition">
<input type="submit" onclick="calculateMoonPhase()">
</div>

</body>
</html>

thank you so much for the link... I guess that's my biggest problem, I know what I want but not how to search for it and then most of the tutorials that I find aren't very clear... I learned html, css, and php from scratch - but when I start dealing with things inside my joomla installation I get befuddled a lot

anyway, thank you so much for you help! you've both been awesome!