Maybe I am not understanding this right or I am just writing something wrong. I am making an incremental game and am trying to figure out total dps which then I can change how gold is generated
This is the line of HTML I am trying to use the function with.
Total DPS:<span id="dps">0</span>
This is the javascript
function dps(){
dps = aadmg + daggerdmg + sworddmg;
document.getElementById("dps").innerHTML = dps;
};
function damageClick(number){
damage = damage + number;
document.getElementById("damage").innerHTML = damage;
gold =gold +1;
document.getElementById("gold").innerHTML = gold;
xp = damage * 2;
document.getElementById("xp").innerHTML = xp;
};
var aadmg = 0;
function buyAA(){
var aaCost = Math.floor(10 * Math.pow(1.1,aadmg));
if(gold >= aaCost){
aadmg = aadmg + 1;
gold = gold - aaCost;
document.getElementById("aadmg").innerHTML = aadmg;
document.getElementById("gold").innerHTML = gold;
};
var nextCost = Math.floor(10 * Math.pow(1.1,aadmg));
document.getElementById('aaCost').innerHTML = nextCost;
};
function buyDagger(){
var daggerCost = Math.floor(300 * Math.pow(1.1,daggerdmg));
if(gold >= daggerCost){
daggerdmg = daggerdmg + 5;
gold = gold - daggerCost;
document.getElementById("daggerdmg").innerHTML = daggerdmg;
document.getElementById("gold").innerHTML = gold;
};
var nextCost = Math.floor(300 * Math.pow(1.1,daggerdmg));
document.getElementById('daggerCost').innerHTML = nextCost;
};
var sworddmg = 0;
function buySword(){
var swordCost = Math.floor(500 * Math.pow(1.1,sworddmg));
if(gold >= swordCost){
sworddmg = sworddmg + 7;
gold = gold - swordCost;
document.getElementById("sworddmg").innerHTML = sworddmg;
document.getElementById("gold").innerHTML = gold;
};
var nextCost = Math.floor(500 * Math.pow(1.1,sworddmg));
document.getElementById('swordCost').innerHTML = nextCost;
};
My thought was that I have function dps used in the html and then it should equal aadmg + daggerdmg + sworddmg. I am getting the element dps with the document.getElementByID("dps").innerHTML = dps;. I have also tried adding getElement for all the dmg's as well. I am confused on how to obtain those numbers from the HTML and then add them together and display them.
You have a suicide function. When you have called the dps function once, it will have replaced itself with the value that you calculate. The next time that you try to call it, the dps identifier doesn't point to the function any more, so the code will crash.
Use a different variable in the function (and make it local by using the var keyword):
function dps(){
var x = aadmg + daggerdmg + sworddmg;
document.getElementById("dps").innerHTML = x;
};
(It would work just to make it local, but there is no good reason to use a local variable by the same name as the function.)
I think you're missunderstanding how functions are called in javascript. They are not called just because they have the same name/id as an html-element.
You would need something that triggers your calculations. A button for example.
A button could trigger your function like so:
<button id="myButton">clickme to calulate</button>
<script>
document.getElementById('myButton').addEventListener("click", function(){
dps();
});
</script>
Then your function dps() would have to look like that:
function dps(){
var x = aadmg + daggerdmg + sworddmg;
document.getElementById("dps").innerHTML = x;
};
But you should refactor your code to have an object that saves and serves all the data you need, instead of having plain global variables.
Related
I have a set of HTML number inputs with ID's
YXS, YSM, YMED
I can get the values of each input, add them together, and display the result to #output.
HOWEVER, it only works when entered in order YXS, YSM, YMED
If i remove YSM so its blank, i only get YXS as a value output to #output.
Im trying to work it, so what ever values are entered, they're either added together and displayed, or if only 1 value is entered, then that value is displayed to #output regardless of the order of input.
Ive been scratching my head with it all day, so looking for some help where possible!
Here is my code :
$('#YXS').on("input", function() {
var yxsInput = this.value;
console.log(yxsInput);
var Silver = (yxsInput / 100) * 90;
var Gold = (yxsInput / 100) * 85;
var Plat = (yxsInput / 100) * 80;
var totalPrice = Number(yxsInput);
$('#output').text(yxsInput);
$("#output_Silver").html(Silver.toFixed(2));
$("#output_Gold").html(Gold.toFixed(2));
$("#output_Plat").html(Plat.toFixed(2));
$('#YSM').on("input", function() {
var ysmInput = this.value;
console.log(ysmInput);
var totalPrice = Number(yxsInput)+Number(ysmInput);
var Silver = (totalPrice / 100) * 90;
var Gold = (totalPrice / 100) * 85;
var Plat = (totalPrice / 100) * 80;
$('#output').text(totalPrice);
$("#output_Silver").html(Silver.toFixed(2));
$("#output_Gold").html(Gold.toFixed(2));
$("#output_Plat").html(Plat.toFixed(2));
$('#YMED').on("input", function() {
var ymedInput = this.value;
console.log(ymedInput);
var totalPrice = Number(yxsInput)+Number(ysmInput)+Number(ymedInput);
var Silver = (totalPrice / 100) * 90;
var Gold = (totalPrice / 100) * 85;
var Plat = (totalPrice / 100) * 80;
$('#output').text(totalPrice);
$("#output_Silver").html(Silver.toFixed(2));
$("#output_Gold").html(Gold.toFixed(2));
$("#output_Plat").html(Plat.toFixed(2));
});
});
I have tried getting the inputs first
$('#YXS').on("input", function() {
var yxsInput = this.value;
console.log(yxsInput);
$('#YSM').on("input", function() {
var ysmInput = this.value;
console.log(ysmInput);
$('#YMED').on("input", function() {
var ymedInput = this.value;
console.log(ymedInput);
Which didnt work out either and console would tell me that yxsInput (for example) is not defined.
Hope ive explained well enough what my end goal is!
Many thanks,
Your problem is that your input event handlers are nested. So YSM and YMED trigger if only YXS is triggered.
Actually you don't need to have a separate handler for each input. See the snippet below:
$('#YXS, #YSM, #YMED').on("input", function() {
var totalPrice = 0;
$('#YXS, #YSM, #YMED').each(function(i, e) {totalPrice += ~~e.value});
var Silver = totalPrice * 0.9;
var Gold = totalPrice * 0.85;
var Plat = totalPrice * 0.8;
$('#output').text(totalPrice);
$("#output_Silver").html(Silver.toFixed(2));
$("#output_Gold").html(Gold.toFixed(2));
$("#output_Plat").html(Plat.toFixed(2));
});
label, h3 {display:flex;
justify-content:space-between;
width:14rem; margin:1rem 0; padding:0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>YXS: <input id="YXS"></label>
<label>YSM: <input id="YSM"></label>
<label>YMED: <input id="YMED"></label>
<h3>Silver: <span id="output_Silver">0.00</span></h3>
<h3>Gold: <span id="output_Gold">0.00</span></h3>
<h3>Plat: <span id="output_Plat">0.00</span></h3>
<h3>Total: <span id="output">0</span></h3>
I'm working on trying to create a random image generator that will show a random image in Javascript. I've been able to make it show a random image via the Javascript math and using random variables. But sadly I'm still yet to be eligible to make my code repeat itself.
I know its probably very simplistic but as you know, we all start from somewhere. I've tried my best to compact my code and I have looked at other stackoverflow recourses but im still in no luck.
A quick overview of what happens, you are meant to be able to press a button and then, a selected random image is replaced by the current one.
What I want: to be able to press a button and then it will proceed to cycle through the random images 'x' times.
My code:
function imgRandom() {
var myImages1 = new Array();
myImages1[1] = "images/Random/Icon1.png";
myImages1[2] = "images/Random/Icon2.png";
myImages1[3] = "images/Random/Icon3.png";
myImages1[4] = "images/Random/Icon4.png";
myImages1[5] = "images/Random/Icon5.png";
myImages1[6] = "images/Random/Icon6.png";
myImages1[7] = "images/Random/Icon7.png";
myImages1[8] = "images/Random/Icon8.png";
myImages1[9] = "images/Random/Icon9.png";
myImages1[10] = "images/Random/Icon10.png";
myImages1[11] = "images/Random/Icon11.png";
myImages1[12] = "images/Random/Icon12.png";
myImages1[13] = "images/Random/Icon13.png";
myImages1[14] = "images/Random/Icon14.png";
myImages1[15] = "images/Random/Icon15.png";
myImages1[16] = "images/Random/Icon16.png";
myImages1[17] = "images/Random/Icon17.png";
myImages1[18] = "images/Random/Icon18.png";
myImages1[19] = "images/Random/Icon19.png";
myImages1[20] = "images/Random/Icon20.png";
myImages1[21] = "images/Random/Icon21.png";
myImages1[22] = "images/Random/Icon22.png";
myImages1[23] = "images/Random/Icon23.png";
var rnd = Math.floor(Math.random() * myImages1.length);
if (rnd == 0) {
rnd = 1;
}
document.getElementById("gen-img").src = myImages1[rnd];
}
<center>
<p>
<img id="gen-img" class="character-image" src="images/QuestionMark.png" style="width:180px;height:310px;">
</p>
<p>
<input type="button" class="button" value="Choose" onclick="setTimeout(imgRandom, 3000);" />
</p>
</center>
I hope this isn't too confusing, i'll be active for a long time if you're able to help! Thanks,
David.
I refactored your code a bit with an possible approach Here's the fiddle: https://jsfiddle.net/mrlew/d2py2jvb/
I commented with some explanations.
/* some flags you can set */
var timesTocycle = 10;
var totalImagesToCreate = 23;
var timeBetweenCycle = 3000;
/* global variables */
var allMyImages = [];
var timesCycled = 0;
/*
function to create your images path.
Called once when you load your page.
*/
function createMyImages(total) {
for (var i=0; i<total;i++) {
var imageNumber = i+1;
var path = getImagePath(imageNumber);
allMyImages.push(path);
}
}
/* separated your path getter */
function getImagePath(imageNumber) {
return "images/Random/Icon" + imageNumber + ".png";
}
/* this is the function called when you press the button and when one cycle ends */
function triggerRandomImage() {
if (timesCycled >= timesTocycle) return;
setTimeout(displayRandomImage, timeBetweenCycle);
}
/* random integer javascript function */
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* function called on setTimeout */
function displayRandomImage() {
var rnd = getRandomInt(0,allMyImages.length-1);
var imageToDisplayPath = allMyImages[rnd];
document.getElementById("gen-img").src = imageToDisplayPath;
timesCycled++;
triggerRandomImage();
/* debug info */
document.getElementById('info').innerText = "(showing: " + imageToDisplayPath + ", cycle: " + timesCycled + ", max: " + timesTocycle + ")";
}
/* call this function to populate the allMyImages array */
createMyImages(totalImagesToCreate);
I believe what you want is for loop. Let me demonstrate with your code:
var count = 10; //number of times to run the for loop
for (i = 0; i < count; i++){
var rnd = Math.floor(Math.random() * myImages1.length);
if (rnd == 0) {
rnd = 1;
}
document.getElementById("gen-img").src = myImages1[rnd];
}
The above code would run the randomizing bit 10 times (= 10 images). Now, I have not tested it yet, but I believe that the images would flash by really quickly. Also, unrelated to the question you may want to read about Javascript arrays.
I am making an incremental game but when I load the game it adds more decimals and counts up to "infinite".
I made a codepen so you can see the error for yourself
Try and click the picture a couple of times and press save and load.
Why are the number of quickscopes going up like that?
The Codepen
var faze = 0;
function fazeClick(number){
faze = faze + number;
document.getElementById('faze').innerHTML = faze;
}
var mntDew = 0;
function buyDew(){
var mntDewCost = Math.floor(10 * Math.pow(1.1,mntDew));
if(faze >= mntDewCost){
mntDew = mntDew +1;
faze = faze - mntDewCost;
document.getElementById('mntDew').innerHTML = mntDew;
document.getElementById('faze').innerHTML = faze;
};
var nextCost = Math.floor(10 * Math.pow(1.2,mntDew));
document.getElementById('mntDewCost').innerHTML = nextCost;
};
function save(){
localStorage.setItem('faze', JSON.stringify(faze));
localStorage.setItem('mntDew', JSON.stringify(mntDew));
//add more here
};
function load(){
if (localStorage.getItem('mntDew')){
faze = localStorage.getItem('faze');
};
if (localStorage.getItem('faze')){
faze = localStorage.getItem('faze');
};
//add more here
};
function deleteSave(){
localStorage.removeItem("save");
};
window.setInterval(function(){
fazeClick(mntDew);
}, 1000);
// <button type="button" onClick="buyDew()">Buy Mountain Dew</button> #buyCursor
//Mountain Dew: <span id="mntDew">0</span><br/> #cursors
//cost: <span id="mntDewCost">10</span> #cursorCost
The responsible of your 'bug' is the following instructions:
window.setInterval(function(){
fazeClick(mntDew);
}, 1000);
Your counter start to increment because the onclick of 'Buy Mountain Dew' button increment the value of `mntDew var', before of that the set interval call fazeClick(0);
I am really sorry, but I'm not able to understand what you want to achieve
I have a problem I can not solve probably due to exhaustion. In my page I have two boxes in which pressing the "start" button changes the background color randomly without repetition. At first it worked then I changed some things and it no longer works as before. Sometimes I do not make colors appear in the array equal on the two panes. Here is my code
function go(){
var random = Math.floor((Math.random() * colori.length) + 0);
var t = Math.floor((Math.random() * colori.length) + 0);
var sx = document.getElementById("sx");
var dx = document.getElementById("dx");
var btngo = document.getElementById("go");
document.getElementById("scritta").innerHTML = random;
document.getElementById("scrittaU").innerHTML = t;
dx.style.backgroud = colori[random];
sx.style.backgroud = colori[t];
if(random == t){
alert("random:"+random+" " +"t"+t);
alert(colori.splice(random,1));
random = Math.floor((Math.random() * colori.length) + 0);
dx.style.background = colori[t];
sx.style.background = colori[random];
colori.splice(random,1);
colori.splice(t,1);
}
dx.style.background = colori[t];
sx.style.background = colori[random];
colori.splice(random,1);
colori.splice(random-1,1);
btngo.disabled=true;
}
dx.style.backgroud = colori[random];
sx.style.backgroud = colori[t];
Do you mean .background?
So I'm a newbie and should obviously spend time in the tuts, but I'm looking for a quick answer. Basically, I've created a grid of movie clips with AS3. When I 'preview' the flash (as a flash or HTML) it shows up fine. Success. Yet, the stage remains empty.
Q1) Will the stage remain empty as I have used AS3 to dynamically 'draw' the grid of mc's? Or is there a slit of code I am missing to make this baby show up on the stage?
Q2) I've managed to use alpha to make the MC's 'fade' on hover - but I want to make them change color (to red) when hovered over. I've searched everywhere and can't seem to find the right script.
Here is my code:
var stage = new createjs.Stage("canvas");
var image = new createjs.Bitmap("images/square.png");
stage.addChild(image);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
image.x += 10;
stage.update();
}
var x0:Number = 0;
var y0:Number = 0;
var nt:Number = 72;
var nc = 10;
var vd:Number = 12;
var hd:Number = 12;
for (var i = 1; i <= nt; i++) {
var mc = this.attachMovie("square", "square" + i, i);
var aprox = Math.floor((i - 1) / nc);
mc._x = x0 + hd * ((i - aprox * nc) - 1);
mc._y = y0 + aprox * vd;
mc.useHandCursor = true;
// fade in
mc.onRollOver = function()
{
this.onEnterFrame = function()
{
if (this._alpha > 0) {
this._alpha -= 10;
} else {
this._alpha = 0;
delete this.onEnterFrame;
}
};
};
// fade out
mc.onRollOut = function()
{
this.onEnterFrame = function()
{
if (this._alpha < 100) {
this._alpha += 10;
} else {
this._alpha = 100;
delete this.onEnterFrame;
}
};
};
}
Thanks in advance - sorry I am a noob.
This will never work. 1/3 of your code is in AS3, 2/3 in AS2. Considering you haven't been thrown any error, I assume you exported it as AS2.