...

View Full Version : Need help with simple JS stuff (functions,loops, etc.)



JS_XenoArcher
07-18-2011, 11:20 AM
Hello,

Problem 1: I have a function and it sets a value to a certain number according to the input. However, I don't want the function to print out the value to the screen, but instead temporarily save it for me to use throughout the whole script. I am a newbie and please help me. For example, I make this code:

function add1(x) {
var x = x + 1
return x;
}

and I call the function:

add1(0);
document.write("value = " + x + "<BR>");

Whenever I do this, document.write doesn't print out value = 1, it doesn't even print anything except for the headers, etc. Is there anyway to set the var x to be a value valid throughout the whole script instead of just the function itself? I really need help on this, thanks.

Problem 2: I want to get a code working. Basically, I use a ram to "ram the gate". I set the damage done each turn, and the Gate's Health too. So for example, my ram's damage is 10 and the gate's health is 200. It would take 20 times to totally breach the gates(i.e., for gate health to become 0). When I use the following code, the total damage is the same throughout the whole looping until the gatehealth reaches 0 which makes it boring, is there anyway to modify or improve the script such that when I loop, the MiscDamage would be different for all the turns? thanks! :):D;) Once again I apologize for asking such a noob-ish and very strange.... question.



<script language="JavaScript" type="text/javascript">
<!-- // Begin

function RamGates(Ram, Attack, Gate) {
//introducing variables to be used
var BaseDamage = 0;
var FullDamage = 0;
var MiscDamage = 0;
var TotalDamage = 0;
var GateHealth = 0;

switch (Ram) {
//ignore this part just comparing ram types
case "Explosive":
BaseDamage="10";
break;
case "Wooden":
BaseDamage="20";
break;
case "Steel":
BaseDamage="30";
break;
case "", "?":
default:
BaseDamage="Failed to recognize Ram";
}

switch (Attack) {
//ignore this just comparing attack values
case 0:
FullDamage = BaseDamage;
break;
case 1:
FullDamage = (BaseDamage*2)-8;
break;
case 2:
FullDamage = (BaseDamage*2)-6;
break;
case 3:
FullDamage = (BaseDamage*2)-4;
break;
case 4:
FullDamage = (BaseDamage*2)-2;
break;
case 5:
FullDamage = BaseDamage*2;
break;
case "", "?":
default:
FullDamage="Failed to recognize Attack";
}

switch (Ram) {
//this part is what i need help on, i need the loop function to keep using this to generate different "lucky damages" each time to make it interesting, i.e., first ram = 11 second ram = 16 third ram = 14 and so on.....
case "Explosive":
MiscDamage = Math.floor(Math.random()*21+10);
break;
case "Wooden":
MiscDamage = Math.floor(Math.random()*6+0);
break;
case "Steel":
MiscDamage = Math.floor(Math.random()*11+5);
break;
case "", "?":
default:
MiscDamage="Failed to recognize Ram";
}

switch (Gate) {
//ignore this part just comparing gate types to generate gate health
case "Wooden":
GateHealth = 50;
break;
case "Brick":
GateHealth = 75;
break;
case "Small Stone":
GateHealth = 90;
break;
case "Large Stone":
GateHealth = 120;
break;
case "Granite":
GateHealth = 140;
break;
case "Iron":
GateHealth = 175;
break;
case "R Iron":
GateHealth = 190;
break;
case "Thick Iron":
GateHealth = 210;
break;
case "Steel":
GateHealth = 230;
break;
case "R Steel":
GateHealth = 250;
break;
case "Thick Steel":
GateHealth = 275;
break;
case "Steel Iron Mix":
GateHealth = 280;
break;
case "Thick Steel Iron Mix":
GateHealth = 300;
break;
case "Strong Ruby Steel Mix":
GateHealth = 400;
break;
case "Strong Sapphire Steel Mix":
GateHealth = 450;
break;
case "R Thick Large Diamond Steel Mix":
GateHealth = 500;
break;
case "", "?":
default:
GateHealth = "Failed to recognize Gate";
}

TotalDamage = FullDamage + MiscDamage;

with (document) {
write ("Soldiers, " + "RAM THE GATES!" + "<BR>");
}

while (GateHealth >= 0)
//loops until gate health is lower than 0
{
//need help! how to make it such that the loop will rerun the switching of ram for generating random misc(lucky) damages
document.write ("Lucky Damage done = " + MiscDamage + "<BR>");
document.write ("Total Damage done = " + TotalDamage + "<BR>");
var GateHealth = GateHealth - TotalDamage
document.write("Current GateHealth = " + GateHealth + "<BR>");
}
}

RamGates("Explosive", 5, "R Thick Large Diamond Steel Mix");
//function calling

// End -->
</script>

Arbitrator
07-18-2011, 01:32 PM
However, I don't want the function to print out the value to the screen, but instead temporarily save it for me to use throughout the whole script.You need to initialize the variable outside the function:


var x = 0;
function add1() {
x++;
}
add1();

Based on your current code, you don't need to return a value. However, if there's something that I'm missing and you really do want to return a value, you can use the following, modified version of the above code:

(Note that I wrote this before I saw your extended code. I guess you added it after the initial post.)


var x = 0;
function add1() {
x++;
return x;
}
add1(); // returns the value of |x|, but nothing is done with that value here


Whenever I do this, document.write doesn't print out value = 1, it doesn't even print anything except for the headers, etc.document.write is useful for writing to the document at runtime. It's not so useful for writing to the document after it's already been created. Use DOM methods for that.

For example, if you want to append messages indicating the variable's value to the end of the document, you might use code like the following:


<!doctype html>
<html lang="en-US">
<head>
<title>Demo Document</title>
<script>
var x = 0;
function add1() {
x++;
// DOM Core + DOM HTML Method
var p_element = document.createElement("p");
var code_element = document.createElement("code");
var text_1 = document.createTextNode("The value of ");
var text_2 = document.createTextNode("x");
var text_3 = document.createTextNode(" is " + x.toString() + ".");
code_element.appendChild(text_2);
p_element.appendChild(text_1);
p_element.appendChild(code_element);
p_element.appendChild(text_3);
document.body.appendChild(p_element);
// |innerHTML| Property Method
// document.body.innerHTML += "<p>The value of <code>x</code> is " + x.toString() + ".</p>";
}
</script>
</head>
<body>
<p onclick="add1();">Click this paragraph to increment the value of <code>x</code> by 1.</p>
</body>
</html>


Basically, I use a ram to "ram the gate". I set the damage done each turn, and the Gate's Health too. So for example, my ram's damage is 10 and the gate's health is 200. It would take 20 times to totally breach the gates(i.e., for gate health to become 0). How do I use a loop to get it working?Here's one way that you might do that. It doesn't involve a loop; instead, it uses a button:

(Note that I wrote this before I saw your extended code.)


<!doctype html>
<html lang="en-US">
<head>
<title>Demo Document</title>
<script>
var HP = 200;
function MozillaFirefox6Beta2BugFix() {
// After an F5-based reload, the |button| element incorrectly remains disabled.
document.getElementById("ram").disabled = false;
}
function ramGate(damage) {
HP += damage;
// DOM Core + DOM HTML Method
var p_element = document.createElement("p");
var abbr_element = document.createElement("abbr");
var text_1 = null;
var text_2 = document.createTextNode("HP");
var text_3 = null;
if (HP > 0) {
text_1 = document.createTextNode("The gate has " + HP.toString() + " ");
text_3 = document.createTextNode(" remaining (of 200); it has taken " + (200 - HP).toString() + " damage.");
}
else {
text_1 = document.createTextNode("The gate has been destroyed; it has no ");
text_3 = document.createTextNode(" remaining.");
document.getElementById("ram").disabled = true;
}
p_element.setAttribute("id", "gate_status");
abbr_element.setAttribute("title", "hit points");
abbr_element.appendChild(text_2);
p_element.appendChild(text_1);
p_element.appendChild(abbr_element);
p_element.appendChild(text_3);
document.body.replaceChild(p_element, document.getElementById("gate_status"));
// |innerHTML| Property Method
/* var p_element = document.getElementById("gate_status");
if (HP > 0) {
p_element.innerHTML = "The gate has " + HP.toString() + " <abbr title=\"hit points\">HP</abbr> remaining (of 200); it has taken " + (200 - HP).toString() + " damage.";
}
else {
p_element.innerHTML = "The gate has been destroyed; it has no <abbr title=\"hit points\">HP</abbr> remaining.";
document.getElementById("ram").disabled = true;
} */
}
</script>
</head>
<body onload="MozillaFirefox6Beta2BugFix();">
<p id="gate_status">The gate has 200 <abbr title="hit points">HP</abbr>. It is at full health.</p>
<button id="ram" value="-10" onclick="ramGate(parseInt(this.value));">Ram the gate (to deal 20 <abbr title="hit points">HP</abbr> in damage to it).</button>
</body>
</html>

JS_XenoArcher
07-19-2011, 07:27 AM
Here's one way that you might do that. It doesn't involve a loop; instead, it uses a button:



I didn't quite much understand your last code, but have you considered modifying my code so that the math.random inside Switch(Ram) function recalculates every time the loop loops? (as i mentioned: When I use the following code, the total damage is the same throughout the whole looping until the gatehealth reaches 0 which makes it boring, is there anyway to modify or improve the script such that when I loop, the MiscDamage would be different for all the turns?) BTW thanks for the help with problem 1, helped me a lot.

siberia-man
07-19-2011, 11:00 AM
Hi JS_XenoArcher,

Do not ensemble your code in this manner as you do. Simplify like below:



var Damages = {
"Explosive": "10",
"Wooden": "20",
"Steel": "30",
"?": "Failed to recognize Ram"
};

var BaseDamage = Damages[Ram] || Damages["?"];

JS_XenoArcher
07-19-2011, 11:29 AM
Hi JS_XenoArcher,

Do not ensemble your code in this manner as you do. Simplify like below:



thanks for your correction, I just picked up js a few weeks ago and well, you can call me a very noob guy. :thumbsup:

JS_XenoArcher
07-22-2011, 08:05 AM
Here's one way that you might do that. It doesn't involve a loop; instead, it uses a button:



Is there a way to make the script such that when I press the button, instead of subtracting a fixed value (in this case 10) from the HP, it will use the math.object function to randomly generate a number within a range (1 ~ 10?) and round it up to the nearest integer? (I tried replacing:

value="-10"
with

value="math.round(math.random()*9+1)"

but after just one press, the script printed out "The gate has been destroyed. It has no HP remaining.". What is wrong with this replacement?

Philip M
07-22-2011, 09:49 AM
value="math.round(math.random()*9+1)"
assigns the string within the quotes as a literal.

You want:

var num = 10;
value = Math.floor(Math.random()*num + 1); // generates numbers 1-10
(note the capital M in Math)
Math.round() does not give a true random distribution as 2-9 are generated more frequenty than 1 or 10.

JS_XenoArcher
07-22-2011, 10:40 AM
var num = 10;
value = Math.floor(Math.random()*num + 1); // generates numbers 1-10.


So how do I exactly put it as a value of the value variable? (sorry if I am too dumb)

The part of the script (as from the last code of Arbitrator's post here (http://www.codingforums.com/showpost.php?p=1113462&postcount=2)) : (I want to replace the "-10" with the expressions above but how?)



<button id="ram" value="-10" onclick="ramGate(parseInt(this.value));">Ram the gate (to deal 10 <abbr title="hit points">HP</abbr> in damage to it).</button>

Philip M
07-22-2011, 01:09 PM
You seem to be confusing the value of a button (that is, the text shown in the button) with the value of a variable.

Try this:-



<input type = button id="ram" onclick="ramGate();" value = "Ram the gate (to deal 1 to 10 HP in damage to it)"</button>

<script type = "text/javascript">
function ramGate() {
var num = 10;
var val = Math.floor(Math.random()*num + 1); // generates numbers 1-10
alert (val); // for testing
}
</script>

JS_XenoArcher
07-23-2011, 05:19 AM
You seem to be confusing the value of a button (that is, the text shown in the button) with the value of a variable.

Try this:-


But the what I wanted was to use that script to deduct a random value of 1 to 10 from the 200 HP, but to achieve it how do I modify that code you showed above so that it does the job like Arbitrator's
value="-10"

Philip M
07-23-2011, 09:04 AM
But the what I wanted was to use that script to deduct a random value of 1 to 10 from the 200 HP, but to achieve it how do I modify that code you showed above so that it does the job like Arbitrator's

Just add a line -

HP = HP - val; // assuming that HP is a global variable.

You might wish to make to range of nubers 1-20 rather than 1 -10 so that the average Hit Points lost is 10 per strike.

Abritrator's code is far too advanced for you to use with your level of experience - you admit that you are a newbie. I get the idea that you are trying to run before you can walk.

JS_XenoArcher
07-23-2011, 09:34 AM
Just add a line -

HP = HP - val; // assuming that HP is a global variable.

You might wish to make to range of nubers 1-20 rather than 1 -10 so that the average Hit Points lost is 10 per strike.

Abritrator's code is far too advanced for you to use with your level of experience - you admit that you are a newbie. I get the idea that you are trying to run before you can walk.

I am a newbie and sorry if I inconvenienced you with my noob ways. :D
I could get the thing to deduct randomly from 1 - 20 but I can only click the button once, but never mind..

Philip M
07-23-2011, 09:53 AM
I could get the thing to deduct randomly from 1 - 20 but I can only click the button once, but never mind..

Why? Each click of the button will call the function ramGate() which will deduct 1-20 points from the HP value.

I thnk you have tried to copy and paste this game from somewhere else and it is not your own work. I say that because <script language="javascript"> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and /--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are probably looking at ancient and perhaps unreliable code.

JS_XenoArcher
07-23-2011, 10:36 AM
Why? Each click of the button will call the function ramGate() which will deduct 1-20 points from the HP value.

I thnk you have tried to copy and paste this game from somewhere else and it is not your own work. I say that because <script language="javascript"> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and /--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are probably looking at ancient and perhaps unreliable code.

I didn't copy it from anywhere, but the <!-- and /--> idea I got from a book, about JavaScript....and it is dated 2003.

(I didn't understand what you mean by add a line, to which script? Arbi's or yours?)

Arbitrator
07-24-2011, 01:31 AM
Sorry for the late reply. My house was being renovated (i.e., I had no computer access). Then I got stuck on trying to figure out how to generate a random number within a range that includes negative numbers. (Apparently, I overlooked the fact that -10 is a smaller number than -1 and this threw the calculation off.)



switch (Ram) {
//this part is what i need help on, i need the loop function to keep using this to generate different "lucky damages" each time to make it interesting, i.e., first ram = 11 second ram = 16 third ram = 14 and so on.....
case "Explosive":
MiscDamage = Math.floor(Math.random()*21+10);
break;
case "Wooden":
MiscDamage = Math.floor(Math.random()*6+0);
break;
case "Steel":
MiscDamage = Math.floor(Math.random()*11+5);
break;
case "", "?":
default:
MiscDamage="Failed to recognize Ram";
}

I don't understand what you mean in the above code comment (i.e., i.e., first ram = 11 second ram = 16 third ram = 14 and so on.....).


Is there a way to make the script such that when I press the button, instead of subtracting a fixed value (in this case 10) from the HP, it will use the math.object function to randomly generate a number within a range (1 ~ 10?) and round it up to the nearest integer?Yes. I've modified the code I wrote previously to do this.

I also changed the function names to be consistent with variable names (i.e., use underscores as word separators instead of camel-case, so ramGate() is now ram_gate()) and added a damage log to make it clearer what is happening. A damage log wasn't necessary before because it was pretty clear what was happening since the damage dealt was always the same.


<!doctype html>
<html lang="en-US">
<head>
<title>Demo Document</title>
<style>
h1 { font-size: inherit; margin-bottom: 0.5em; }
.placeholder { font-style: italic; }
#damage_log p { margin: 0.5em 0; font-size: 75%; }
</style>
<script>
var HP = 200;
var placeholder_intact = true;
function Mozilla_Firefox_6_Beta_2_Bug_Fix() {
// After an F5-based reload, the |button| element incorrectly remains disabled.
document.getElementById("ram").disabled = false;
}
function print_to_damage_log(damage, minimum_damage, maximum_damage) {
var div_element = document.getElementById("damage_log");
if (placeholder_intact === true) {
if (typeof div_element.getElementsByClassName === "function") {
div_element.removeChild(div_element.getElementsByClassName("placeholder").item(0));
}
else {
div_element.removeChild(div_element.getElementsByTagName("p").item(0));
}
placeholder_intact = false;
}
// DOM Core + DOM HTML Method
var p_element = document.createElement("p");
var abbr_element = document.createElement("abbr");
var text_1 = document.createTextNode("The gate took " + (damage * -1).toString() + " ");
var text_2 = document.createTextNode("HP");
var text_3 = document.createTextNode(" in damage!");
if (maximum_damage !== null && damage < 0 && ((damage / minimum_damage) >= 0.8)) { // If damage taken is 80% of the maximum or more...
text_3.data += " (Critical Strike)";
}
if (HP <= 0) {
text_3.data += " The gate is destroyed."
}
abbr_element.setAttribute("title", "hit points");
abbr_element.appendChild(text_2);
p_element.appendChild(text_1);
p_element.appendChild(abbr_element);
p_element.appendChild(text_3);
div_element.appendChild(p_element);
// |innerHTML| Property Method
/* var critical_strike = "";
var gate_destroyed = "";
if (maximum_damage !== null && damage < 0 && ((damage / minimum_damage) >= 0.8)) { // If damage taken is 80% of the maximum or more...
critical_strike += " (Critical Strike)";
}
if (HP <= 0) {
gate_destroyed += " The gate is destroyed.";
}
div_element.innerHTML += "<p>The gate took " + (damage * -1).toString() + " <abbr title=\"hit points\">HP</abbr> in damage!" + critical_strike + gate_destroyed + "</p>"; */
}
function ram_gate(damage) {
var minimum_damage = null;
var maximum_damage = null;
if (damage.split("/").length > 0) {
damage = damage.split("/");
var damage_range_end_1 = parseInt(damage[0], 10);
var damage_range_end_2 = parseInt(damage[1], 10);
if (damage_range_end_1 === damage_range_end_2) {
damage = damage_range_end_1;
}
else {
if (damage_range_end_1 > damage_range_end_2) {
minimum_damage = damage_range_end_2;
maximum_damage = damage_range_end_1;
}
else if (damage_range_end_1 < damage_range_end_2) {
minimum_damage = damage_range_end_1;
maximum_damage = damage_range_end_2;
}
damage = Math.floor(Math.random() * (maximum_damage - minimum_damage + 1) + minimum_damage);
}
}
HP += damage;
// DOM Core + DOM HTML Method
var p_element = document.createElement("p");
var abbr_element = document.createElement("abbr");
var text_1 = null;
var text_2 = document.createTextNode("HP");
var text_3 = null;
if (HP > 0) {
text_1 = document.createTextNode("The gate has " + HP.toString() + " ");
text_3 = document.createTextNode(" remaining (of 200); it has taken " + (200 - HP).toString() + " total damage.");
}
else {
text_1 = document.createTextNode("The gate has been destroyed; it has no ");
text_3 = document.createTextNode(" remaining.");
document.getElementById("ram").disabled = true;
document.getElementById("ram").blur(); // Opera 11.50 bug fix
}
p_element.setAttribute("id", "gate_status");
abbr_element.setAttribute("title", "hit points");
abbr_element.appendChild(text_2);
p_element.appendChild(text_1);
p_element.appendChild(abbr_element);
p_element.appendChild(text_3);
document.body.replaceChild(p_element, document.getElementById("gate_status"));
// |innerHTML| Property Method
/* var p_element = document.getElementById("gate_status");
if (HP > 0) {
p_element.innerHTML = "The gate has " + HP.toString() + " <abbr title=\"hit points\">HP</abbr> remaining (of 200); it has taken " + (200 - HP).toString() + " total damage.";
}
else {
p_element.innerHTML = "The gate has been destroyed; it has no <abbr title=\"hit points\">HP</abbr> remaining.";
document.getElementById("ram").disabled = true;
document.getElementById("ram").blur(); // Opera 11.50 bug fix
} */
print_to_damage_log(damage, minimum_damage, maximum_damage);
}
</script>
</head>
<body onload="Mozilla_Firefox_6_Beta_2_Bug_Fix();">
<p id="gate_status">The gate has 200 <abbr title="hit points">HP</abbr>. It is at full health.</p>
<button id="ram" value="-1/-10" onclick="ram_gate(this.value);">Ram the gate (to deal 1 to 10 <abbr title="hit points">HP</abbr> in damage to it).</button>
<div id="damage_log">
<h1>Damage Log</h1>
<p class="placeholder">No damage has been dealt yet.</p>
</div>
</body>
</html>


I didn't copy it from anywhere, but the <!-- and /--> idea I got from a book, about JavaScript....and it is dated 2003.It's been a common practice, but it's archaicand unnecessary. You can safely dispense with the <!-- and --> code (i.e., comment delimiters).

You actually don't even need to use type="text/javascript" in the latest version of HTML either; type="text/javascript" is implied in HTML5 if the type attribute is missing, so simply starting your scripts with <script> is fine in such documents (though it doesn't hurt to explicitly specify the script type even in HTML5).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum