Develop Reference

How can I make an if else statement in JavaScript prompt a user to hit a button to continue the statement?

I have built a little project game and there is a combat system. The problem is if you hit attack it runs the if else statement all the way through but doesn't show everything. It also gives me a Not a Number error if you lose, and I can't figure out what to do. Do I need to change the order of statements or something like that?
setFightEvent: function() {
let getArena = document.querySelector(".arena");
let getEnemy = document.querySelector(".enemy");
let enemy00 = new Enemy("Goblin", 100, 0, 20, 50, 100, 100);
let enemy01 = new Enemy("Troll", 200, 0, 40, 50, 80, 150);
let chooseRandomEnemy= Math.floor(Math.random() * Math.floor(2));
switch (chooseRandomEnemy) {
case 0:
enemy = enemy00;
getArena.innerHTML = '<div><p>You are fighting a ' + enemy.enemyType + '<button class="btn-attack" onclick="EventManager.FightEvent()">Attack!</button></p></div>';
break;
case 1:
enemy = enemy01;
getArena.innerHTML = '<div><p>You are fighting a ' + enemy.enemyType + '<button class="btn-attack" onclick="EventManager.FightEvent()">Attack!</button></p></div>';
break;
}
getEnemy.innerHTML = '<img src="img/avatar-enemy/' + enemy.enemyType.toLowerCase() + '.jpg" alt="' + enemy.enemyType + '" class="img-enemy"><div><h3 class="type-enemy">' + enemy.enemyType + '</h3><p class="health-enemy">Health: ' + enemy.health + '</p><p class="mana-enemy">Mana: ' + enemy.mana + '</P><p class="dexterity-enemy>Dexterity :' + enemy.dexterity + '</p></div>';
},
FightEvent: function() {
let getEnemy = document.querySelector(".enemy");
getEnemy.style.visibility = 'visible';
let getArena = document.querySelector(".arena");
let getPlayerHealth = document.querySelector(".health-player");
let getEnemyHealth = document.querySelector(".health-enemy");
let getPlayerGold = document.querySelector(".gold-player");
let getPlayerDexterity = player.dexterity;
let getEnemyDexterity = enemy.dexterity;
let playerAttack = function () {
let calcBaseDamage;
if (player.mana > 0) {
calcBaseDamage = player.strength * player.mana / 1000;
} else {
calcBaseDamage = player.strength * player.dexterity / 1000;
}
let offsetDamage = Math.floor(Math.random() * Math.floor(10));
let calcOutputDamager = calcBaseDamage + offsetDamage;
let numberOfHits = Math.floor(Math.random() * Math.floor(player.dexterity / 6) / 2) + 1 ;
let attackValues = [calcOutputDamager, numberOfHits];
return attackValues;
}
let enemyAttack = function () {
let calcBaseDamage;
if (enemy.mana > 0) {
calcBaseDamage = enemy.strength * enemy.mana / 1000;
} else {
calcBaseDamage = enemy.strength * enemy.dexterity / 1000;
}
let offsetDamage = Math.floor(Math.random() * Math.floor(6))
let calcOutputDamager = calcBaseDamage + offsetDamage;
let numberOfHits = Math.floor(Math.random * Math.floor(enemy.dexterity / 6) / 2) + 1 ;
let attackValues = [calcOutputDamager, numberOfHits];
return attackValues;
}
if (getPlayerDexterity >= getEnemyDexterity) {
let PlayerAttackValues = playerAttack();
let totalDamage = PlayerAttackValues[0] * PlayerAttackValues[1];
enemy.health = enemy.health - totalDamage;
getArena.innerHTML = '<div><p>You hit the ' + enemy.enemyType + ' for ' + PlayerAttackValues[0] + ' damage ' + PlayerAttackValues[1] + ' times!</p></div>';
if (enemy.health <= 0) {
player.gold = player.gold + enemy.gold;
player.xp = player.xp + enemy.xp;
getArena.innerHTML = '<div<p>After a hard fought battle, you won. You also looted the ' + enemy.enemyType + ' and it had ' + enemy.gold + ' gold!<br>Gained ' + enemy.xp + ' XP!</p></div>';
getPlayerGold.innerHTML = 'Gold: ' + player.gold;
getPlayerHealth.innerHTML = 'Health: ' + player.health;
getEnemyHealth.innerHTML = 'Health: 0';
} else {
let enemyAttackValues = enemyAttack();
let totalDamage = enemyAttackValues[0] * enemyAttackValues[1];
player.health = player.health - totalDamage;
getArena.innerHTML = '<div><p>The ' + enemy.enemyType + ' hit you for ' + enemyAttackValues[0] + ' damage ' + enemyAttackValues[1] + ' times!</p></div>';
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
getPlayerHealth.innerHTML = 'Health: ' + player.health;
if (player.health <= 0) {
player.xp = player.xp + (enemy.xp / 2);
getArena.innerHTML ='<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
getPlayerHealth.innerHTML = 'Health: 0';
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
} else {
getPlayerHealth.innerHTML = 'Health: ' + player.health;
}
}
} else if (getEnemyDexterity >= getPlayerDexterity) {
let enemyAttackValues = enemyAttack();
let totalDamage = enemyAttackValues[0] * enemyAttackValues[1];
player.health = player.health - totalDamage;
getArena.innerHTML = '<div><p>The ' + enemy.enemyType + 'hit you for ' + enemyAttackValues[0] + ' damage ' + enemyAttackValues[1] + ' times!</p></div>';
if (player.health <= 0) {
player.xp = player.xp + (enemy.xp / 2);
getArena.innerHTML ='<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
getPlayerHealth.innerHTML = 'Health: 0';
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
} else {
let PlayerAttackValues = playerAttack();
let totalDamage = PlayerAttackValues[0] * PlayerAttackValues[1];
enemy.health = enemy.health - totalDamage;
getArena.innerHTML = '<div><p>You hit the ' + enemy.enemyType + ' for ' + PlayerAttackValues[0] + ' damage ' + PlayerAttackValues[1] + ' times!</p></div>';
getPlayerHealth.innerHTML = 'Health: ' + player.health;
if (enemy.health <= 0) {
player.gold = player.gold + enemy.gold;
player.xp = player.xp + enemy.xp;
getArena.innerHTML = '<div<p>After a hard fought battle, you won. You also looted the ' + enemy.enemyType + ' and it had ' + enemy.gold + ' gold!<br>Gained ' + enemy.xp + ' XP!</p></div>';
getPlayerGold.innerHTML = 'Gold: ' + player.gold;
getPlayerHealth.innerHTML = 'Health: ' + player.health;
getEnemyHealth.innerHTML = 'Health: 0';
alert("Select another action before fighting again!");
} else {
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
}
}
}
},
the code seems to run fine unless you are going to lose, then it just breaks. I want to be able to say the first if else, then ask the user to hit a button before it continues. Like, if you don't kill them in one hit I would like it to show the updated health of the player and monster THEN run the if else statement again. I think the problem is if you dont OTK them it just dies. I hope that makes sense!
ps. https://squarecylinder.github.io/Stress-of-The-Kingdom/ here is a link to the game, but I used absolute positioning in CSS to line everything up, so I don't think it would look right in every display! I'm trying to figure that out as well!

The comments have already addressed the fact that you're stating Math.random instead of calling Math.random() at one point in your code, so I'll leave that alone. Other than that, this line doesn't have a semicolon at the end:
getArena.innerHTML = '<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
It occurs twice in the code. I haven't set up a running sample of the code, so I don't know if this is your only remaining issue. If it still doesn't work after making this update, let me know and I'll remove this answer.
Side note:
Your random statements are a little bit needlessly complex. For example, with this line:
Math.floor(Math.random() * Math.floor(10))
there's no need to floor 10. 10 is already a flat integer. In fact, because you're using a lot of randomness, I'd use randojs.com to make all your randomness simpler and more readable. The line above can be written as just rando(0, 9). If you choose to use randojs, all you have to do is add the following line to the head tag of your html document:
<script src="https://randojs.com/1.0.0.js"></script>

Modifying an X and Y variable, based on position in For Loop

EDIT - I don't think I explained it very well the first time.
I have a lot of data - it's in an Array, with each item in the array being an object. In the system I am working in (a control system for A/V devices, which uses JavaScript as the programming language), I am generating buttons based on the length of the array. I want to be able to position a button, and essentially know the X and Y coordinates for each button in the array - with X and Y being Row/Column. (which I then translate to a X/Y pixel position on my UI.
My initial code, which is below, is within a for loop, and I manually calculated the button position. But this is tedious, as I use this same function to show off different groups/sizes of buttons.
Anywhere there is mirage.log = console.log.
The code below is part of a For Loop
button.element.style.position = 'absolute'; //Do to all Buttons.
if (i == 0) //First Item
{
button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = btn_Info.startTop + 'px';
}
else if (i <= btn_Info.numRow-1) //First Column.
{
mirage.log('Setting Position of First Column');
button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * i + btn_Info.startTop + 'px';
}
else if (i > btn_Info.numRow - 1 && i <= btn_Info.numRow * 2 - 1)
{
mirage.log('Setting Second column ' + i);
button.element.style.left = btn_Info.startLeft + btn_Info.width + btn_Info.hOffset + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i-btn_Info.numRow) + btn_Info.startTop + 'px';
}
else
{
mirage.log('Setting Third column ' + i);
button.element.style.left = btn_Info.startLeft + ((btn_Info.width + btn_Info.hOffset)*2) + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i - (btn_Info.numRow*2)) + btn_Info.startTop + 'px';
}
Thanks in advance for the help - I have grabbed so many answers from this forum over the last year, you guys are awesome!
EDIT -
I was able to get some adjustment if I generate rows first then columns:
I was able to get a little close with the help of a friend, and be able to adjust for a 2 column layout by doing the following:
encoder = {
'buttonVals':{'width':125,'height':50,'numCols':2,'numRows':null;'vOffset':10,'hOffset':10}
var posLeft;
var posTop;
posLeft = (i % encoder.buttonVals.numCols) * (encoder.buttonVals.width + encoder.buttonVals.hOffset) + encoder.buttonVals.startLeft;
posTop = Math.floor(i / encoder.buttonVals.numCols) * (encoder.buttonVals.height + encoder.buttonVals.vOffset) + encoder.buttonVals.startTop;

After working on this for a bit - here is the code that I got to work. This prints out both the row position, and the column position.
testFunction = function(incRow, incCol){
var myFunc = {
'testLength':0,
'numRows':incRow,
'numCols':incCol,
'array':[],
};
myFunc.testLength = incRow * incCol;
for(var c=0, posCol = 0, posRow = 0; c < myFunc.testLength; c++)
{
var whichRow;
posRow = Math.floor(c/myFunc.numRows);
whichRow = Math.floor(c/myFunc.numRows) + c;
if (whichRow > myFunc.numRows)
{
whichRow = whichRow - (myFunc.numRows * posRow) - posRow;
if (whichRow === 0)
{
posCol = posCol + 1;
}
}
console.log(c + ' : ' + whichRow + ' : ' + posCol);
}
};
testFunction(6,4);

Changing NaN and undefined [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
On my upload page after an upload is finished instead of displaying the numbers expected it displays undefined and NaN, I was wondering if there was any way I could change undefined to show the file size and NaN to display 0.
Here is an screenshot to show what I am talking about.
http://i.stack.imgur.com/hrgKd.png
Thank you.
Joe

In your code you have this function:
function updateProgessText(progress, uploadedBytes, totalBytes) {
nowTime = (new Date()).getTime();
loadTime = (nowTime - startTime);
if (loadTime == 0) {
loadTime = 1;
}
loadTimeInSec = loadTime / 1000;
bytesPerSec = uploadedBytes / loadTimeInSec;
textContent = '';
textContent += '' + progress + '% complete';
textContent += ' ';
textContent += '(' + bytesToSize(uploadedBytes, 2) + ' of ' + bytesToSize(totalBytes, 2) + ')';
$("#fileupload-progresstextLeft").html(textContent);
rightTextContent = '';
rightTextContent += '' + humanReadableTime((totalBytes / bytesPerSec) - (uploadedBytes / bytesPerSec)) + ' remaining';
rightTextContent += ' at ' + bytesToSize(bytesPerSec, 2) + 'P/s';
$("#fileupload-progresstextRight").html(rightTextContent);
}
You'll want to check if the progress is 100, and if so, show the completed messages. I'm not sure why uploadedBytes and totalBytes are returning undefined, that has to do with the JQuery File Upload Plugin I'm guessing. What you can do is something like this:
function updateProgessText(progress, uploadedBytes, totalBytes) {
if (progress < 100) {
nowTime = (new Date()).getTime();
loadTime = (nowTime - startTime);
if (loadTime == 0) {
loadTime = 1;
}
loadTimeInSec = loadTime / 1000;
bytesPerSec = uploadedBytes / loadTimeInSec;
textContent = '';
textContent += '' + progress + '% complete';
textContent += ' ';
textContent += '(' + bytesToSize(uploadedBytes, 2) + ' of ' + bytesToSize(totalBytes, 2) + ')';
$("#fileupload-progresstextLeft").html(textContent);
rightTextContent = '';
rightTextContent += '' + humanReadableTime((totalBytes / bytesPerSec) - (uploadedBytes / bytesPerSec)) + ' remaining';
rightTextContent += ' at ' + bytesToSize(bytesPerSec, 2) + 'P/s';
$("#fileupload-progresstextRight").html(rightTextContent);
}
else {
$("#fileupload-progresstextLeft").html('100% complete');
$("#fileupload-progresstextRight").html('0 seconds remaining');
}
}

Check this statement:
rightTextContent += '' + humanReadableTime((totalBytes / bytesPerSec) - (uploadedBytes / bytesPerSec)) + ' remaining';
You have missed to specify humanReadableTime for (uploadedBytes / bytesPerSec). So it should be:
rightTextContent += '' + humanReadableTime((totalBytes / bytesPerSec) - humanReadableTime(uploadedBytes / bytesPerSec)) + ' remaining';

What's wrong with my Ip to hex equation in javascript? Output doesn't match other sites

Code, give item is a valid ip (i.e. 254.253.242.222 )
`var h0 = Math.pow(256,0);`
`var h1 = Math.pow(256,1);`
`var h2 = Math.pow(256,2);`
var h3 = Math.pow(256,3);
var splitup = item.split('.'); var iHex = (splitup[3] * h0) + (splitup[2] * h1) + (splitup[1]* h2) + (splitup[0] * h3) ;
var hhexip = parseInt(iHex,16);
$('#hexip').val($('#hexip').val() + "0x" + hhexip +"\n" );
this site http://www.silisoftware.com/tools/ipconverter.php?convert_from=254.253.242.222
edit
fixed code to use math.pow... still getting wrong out put though.
says it should be
0xFEFDF2DE
but i get 0x285481457222
help?

var item = "254.253.242.222";
var splitup = item.split('.');
var iHex = parseInt(splitup[0]).toString(16) + parseInt(splitup[1]).toString(16) + parseInt(splitup[2]).toString(16) + parseInt(splitup[3]).toString(16);
var hhexip = parseInt(iHex,16);
$('#hexip').val($('#hexip').val() + "0x" + hhexip +"\n" );

building an ordered list from small to big

I have the following hardcoded JSON:
var myData = [
{"Identifier":1,"Naam":"Van Der Valk","Adres":"Europaweg 218","Postcode":"1238AC","Plaats":"Zoetermeer","Longitude":"4.48822","Latitude":"52.06258", "Status":"Laadpunten Beschikbaar", "lunch":"true", "diner":"true", "meet":"true", "wifi":"true"},
{"Identifier":2,"Naam":"NOT Given","Adres":"NOT Given 1","Postcode":"0000LL","Plaats":"Rotterdam","Longitude":"0.00000","Latitude":"0.00000", "lunch":"false"},
{"Identifier":3,"Naam":"NOT Given","Adres":"NOT Given 6","Postcode":"0000LL","Plaats":"Rotterdam","Longitude":"0.00000","Latitude":"0.00000", "lunch":"false"},
{"Identifier":4,"Naam":"NOT Given","Adres":"NOT Given 1","Postcode":"0000LL","Plaats":"Den Haag","Longitude":"0.00000","Latitude":"0.00000", "lunch":"false"},
{"Identifier":5,"Naam":"plek b met lunch en diner","Adres":"NOT Given 218","Postcode":"0000LL","Plaats":"Zoetermeer","Longitude":"0.00000","Latitude":"0.00000", "lunch":"true", "diner":"true", "wifi":"true"}
];
This json i use in my ios phonegap app.. Each line of code in the Json is a point in the netherlands.. I am trying to build a function which calculates the distance between where the phone is and the lat and long from the json.. eventually these json code needs to come in a ordered list where also the distance are from small to big..
for the distance measurement i Used this:
function haversine() {
$.each(myData, function(index, element) {
var R = 6371; // earth's mean radius in km
var dLat = rad(element.Latitude - lat1);
var dLong = rad(element.Longitude - long1);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(rad(lat1)) * Math.cos(rad(element.Latitude)) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
//var element = document.getElementById('afstand');
//element.innerHTML = 'afstand: ' + d.toFixed(3);
$('.greenfluxlist').append('<li id="' + element.Identifier + '">' + element.Naam + ' ' + element.Plaats + '<p> <br/>' + element.Adres + ',<br/> ' + element.Postcode + ' ' + element.Plaats + '<br/> Status: ' + element.Status + '</p> <span class="ui-li-count">' + d.toFixed(3) + '</span></li>');
});
$('.greenfluxlist').trigger('create');
$('.greenfluxlist').listview('refresh');
//return d.toFixed(3);
}
What my problem now is, how can i build the ordered list, is it possible to get everything into an array and then loop through it or something else, i think there has to be a simple solution but i don't know.

To sort an array, use the sort method.
You should calculate the distance first, then sort the array, and then generate the list. Something like this:
function calculateDistance(element)
{
var R = 6371; // earth's mean radius in km
var dLat = rad(element.Latitude - lat1);
var dLong = rad(element.Longitude - long1);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(rad(lat1)) * Math.cos(rad(element.Latitude)) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
function generateList(data)
{
for(var i=0; i<data.lenght; i++)
{
var element = data[i];
//var element = document.getElementById('afstand');
//element.innerHTML = 'afstand: ' + element.Distance.toFixed(3);
$('.greenfluxlist').append('<li id="' + element.Identifier + '">' + element.Naam + ' ' + element.Plaats + '<p> <br/>' + element.Adres + ',<br/> ' + element.Postcode + ' ' + element.Plaats + '<br/> Status: ' + element.Status + '</p> <span class="ui-li-count">' + element.Distance.toFixed(3) + '</span></li>');
}
}
for(var i=0; i<myData.length; i++)
{
myData[i].Distance = calculateDistance(myData[i]);
}
myData.sort(function(a,b) {
return a.Distance > b.Distance;
});
generateList(myData);