• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Kinda complicated javascript project that I have no idea how to do.

Squornshellous Beta

Active member
Pronoun
she/they/any
So. This is a project I'm working on, and my googling has turned up no useful results. So I'm hoping someone can help out.

Firstly, I would want to declare a variable.
That variable would take its initial value from a text input.
If a checkbox was checked, it would multiply the variable by 1.25, but otherwise leave it as it was.
Then it would divide the variable by 10, truncating it after the decimal point. I guess I would use math.Floor?
Then it would modify the variable based on the selected value of a select list, with the first option subtracting 1, the second leaving it the same, the third adding 1.
It would then check if the value of another text input, when divided by ten and math.floored, would be above 7. If it would be, it would add 7 to the variable; otherwise it would add the value divided by ten and math.floored.
If the value of the variable was less than 1, it would set it to 1. If it had a decimal, it would math.floor it. Otherwise, it would leave it as it were.

And finally, it would output the value, in text form, to a paragraph.


Whoo, that's kind of a lot when it's all listed like that :B I hope someone has the time to help me, haha. Preferably in the teachiest way possible, since I would quite like to add this to my limited JavaScript knowledge.
 
Which part is actually giving you trouble? I'm assuming you've managed at least the "declare a variable" step...

Most of this I think you could figure out from a pretty basic tutorial; you appear to know all the logic you want going on, you just need to know the syntax to implement it.
 
I think you're overestimating how much JS I actually know. I tried looking up tutorials and stuff, failed miserably, gave up and came to ask here.
 
Code:
// First we want to declare the variable. This part is straightforward.
var x;

/* To get a value from a text input, we access the text input through the DOM level 0.
   Basically, there is an object called document.forms, which contains all the forms in
   the document; document.forms['form1'] gets the form with the name (not ID) 'form1',
   if it exists. This object contains another object called elements, which contains the
   form elements; document.forms['form1'].elements['textbox1'] will get you the element
   with the name 'textbox1' within form1. Once you have selected a form element, you
   can get its current value with value. And to make the variable into a number (so that
   it will correctly understand the + operator as arithmetic addition rather than string
   concatenation and so on), we multiply it by one. (It would be prudent to do some kind
   of a check after this: if the type of x is NaN (typeof(x) == 'NaN'), you'll probably want
   to stop the calculations and prompt the user to insert a proper number into the field.
   But if this is just a hacked-together thing you want to use for yourself, you won't need
   it.) */
x = document.forms['form1'].elements['textbox1'].value * 1;

// To get whether a checkbox is checked, check the checkbox's checked property.
if (document.forms['form1'].elements['checkbox1'].checked) {
   x *= 1.25;
}

// Math.floor is indeed how you'd truncate a number at the decimal point, so let's do that.
x = Math.floor(x/10);

/* Select lists are a bit annoying; they have a property called selectedIndex, which is the
   index of the selected option, and then you'll have to access that index in the select list's
   options array and get its value. Here you'd code the select list itself so that the three
   options would have a value attribute of -1, 0 and 1, respectively. (This is simpler than
   giving them some other values and then mapping those values onto what should be done
   with x; this is all you're using these values for, so you might as well just have the values
   be the value you want to add.) */
x += document.forms['form1'].elements['select1'].options[document.forms['form1'].elements['select1'].selectedIndex].value;

/* Your wording of how to do the next thing overcomplicates what you're doing. What you
   actually want to add is either seven or the input divided by ten and rounded down,
   whichever is smaller, and you do this with the Math.min function. */
x += Math.min(Math.floor(document.forms['form1'].elements['textbox2'].value / 10), 7);

/* Similarly, what you actually want in the final step is either the 1 or the floor of x,
   whichever is greater, which you can do with Math.max. */
x = Math.max(1, Math.floor(x));

/* To print the value into a paragraph, it is easiest to give the paragraph an ID and then
   modify its innerHTML, like so: */
document.getElementById('paragraph1').innerHTML = x;

Ta-da. Should work.
 
Butterfree, you continue to be awesome :D thanks!

One thing I forgot: is it possible to make the output-into-element thing happen only after a button is pressed?
 
Yes; you'd make that into a function that you call on the button's onclick event.
 
Code:
<button name="damagecalc" onClick="showdamage">Calculate</button>
Where "showdamage" is the name of the function I defined for writing the thing to the element.
 
Could you give me the full source code of the page, including the entirety of the script you have?
 
You want the whole script inside the showdamage function, not just the bit that displays the damage. Otherwise, it's going to calculate everything according to the values in the form when the page loads, and then when you press the button all it does is write the same value down again.

Though you got the names mixed around in that line; you're writing the value of the variable damagedisplay (which doesn't exist) into an element with the id damage instead of the other way around. Also, earlier I forgot to multiply the value of the select box by one; you'll want to insert that, or it will just tack the value of the select box onto the damage variable as a string.

None of this seems like it should be the problem (it would explain everything if you had an element with the ID 'damage' on your page, but you don't appear to), but try it anyway.
 
I think the reason that the button's "clearing" all the inputs on the page is that by default (at least in most browsers), the type for a <button> would be "submit"; after you click the button, you might notice something like "?damagepower=&energypower=&damageevo=-1&damagetype=0&damageatk=0&damagedef=0&damagecalc=" appended to your page's URL. You can fix that by specifying the button's type as just "button":

Code:
<button name="damagecalc" onClick="showdamage" type="button">Calculate</button>

EDIT: Also, this is the syntax for declaring a function:

Code:
function functionName(var1, var2, varThing)

You're not passing any parameters (the var1, var2, varThing part) on to your function, but you'll still need the empty parentheses after the function name.
 
Last edited:
It works! Thanks guys :D

This thread is an indication of why one doesn't try to leap into JavaScript headfirst I guess

EDIT: Aaaaand one more thing.

How do I make it take the value from a text-input and convert that into another value? Say my textbox has 0-50, it leaves it alone, but 51-75, adds 1, 76-100, adds 2 and so on. Is there an easy way to do that? I promise this is the last thing
 
Last edited:
HTML:
var power = document.forms['form2'].elements['textbox1'].value
var energy = math.ceiling(power/25)-2

if (energy < 0) {
energy=0
}

energy+=power

document.write("<p>"energy"</p>")

Just name the form "form2" and the textbox "textbox1". Although I don't think this is what you're trying to do.
 
You could just use a series of if statements, or if there's a consistent arithmetical relationship between the numbers in the textbox and the number you want to add, you could just add the value of a formula calculated from the textbox's value.
 
Blar, I really ought to learn when to leave my projects as they are.

So. In trying to streamline it somewhat, I've completely incapacitated the entire thing. I have no idea how I did this, and can't find the problem. So.
New page code, new JS.
 
Name your button something that's not "calculate", which happens to be the name of the function you're trying to call. I think that's what's confusing it. Also, you haven't actually got an element with the ID "energydisplay" anywhere; you should take that line out from the script.
 
Back
Top Bottom