I hope this question does not exist yet, but I am pretty sure it does somewhere. However, I honestly tried to search for it, but having a hard time to find the correct words in order to find something.
Goal I want to use two objects for calculations in the script section, which I passed from the routing to the ejs website. Those objects are called "currentPlanet" and "buildingInfo" and I would like to loop through those within a for loop.
Situation While I can use those objects exactly as I want to, within the html section, I cannot do so within the script section. However, I can actually get all the necessary information out of those objects, but only if I use specific numbers, instead of the for loop i. Furthermore, I use i in the same function for other purposes and it works. The script is within the body at the very end.
Works
var costCarbonCalc = <%= buildingInfo[1][currentPlanet[buildingInfo[1][0].type] + 1].costCarbon %>;
Not working
var costCarbonCalc = <%= buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costCarbon %>;
=> a is not defined (this is my for loop integer)
var costCarbonCalc = buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costCarbon;
=> buildingInfo not defined
Code of interest
<script>
setContructionTimes();
function setContructionTimes(){
for (var a = 0; a < <%= buildingInfo.length %>; a++) {
var constconstructionID = document.getElementById(`buildingTime${a}`);
var costCarbonCalc = <%= buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costCarbon %>;
var costFuelCalc = <%= buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costFuel %>;
var ressources = costCarbonCalc + costFuelCalc;
var construction = <%= currentPlanet.productionConstruction %> * <%= currentPlanet.bonusConstruction %>;
var constructionTime = (ressources*60*60) / construction;
let days = Math.floor(constructionTime / (24*60*60));
let hours = Math.floor(constructionTime / (60*60));
let minutes = Math.floor(constructionTime / 60);
let seconds = Math.floor(constructionTime % 60);
days = days < 10 ? '0' + days : days;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
constconstructionID.innerHTML = `${days}:${hours}:${minutes}:${seconds}`;
}
}
</script>
Complete building.ejs
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width", initial-scale=1.0>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<script src="https://kit.fontawesome.com/8d2781ba17.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/jQuery/jqueryCurrentPlanetResources.js"></script>
<script src="/jQuery/jqueryBuildingInfo.js"></script>
</head>
<body>
<div class="wrapper-current-planet">
<div></div>
<div><h1><%= currentPlanet.name %></h1></div>
<div></div>
<div id="align-right">
<p><h1 id="jquery-currentCarbon" style="text-transform: lowercase;" title="Available Carbon"><i class="fas fa-atom fa-sm"></i></h1></p>
<p><h1 id="jquery-currentFuel" style="text-transform: lowercase;" title="Available Fuel"><i class="fas fa-gas-pump fa-sm"></i></h1></p>
<p><h1 id="jquery-currentCredit" style="text-transform: lowercase;" title="Available Credits"> <i class="fas fa-yen-sign fa-sm"></i></h1></p>
</div>
<div><img id="current-planet-img" src=<%= currentPlanet.image %>></div>
<div id="align-left">
<p><h1 style="text-transform: lowercase;" title="Carbon Production"><%= currentPlanet.productionCarbon %>/h <i class="fas fa-atom fa-sm"></i></h1></p>
<p><h1 style="text-transform: lowercase;" title="Fuel Production"><%= currentPlanet.productionFuel %>/h <i class="fas fa-gas-pump fa-sm"></i></h1></p>
<p><h1 style="text-transform: lowercase;" title="Credit Production"><%= currentPlanet.productionCredit %>/h <i class="fas fa-yen-sign fa-sm"></i></h1></p>
</div>
<div></div>
<div><h4 title="Planet Position (Galaxy:Solar System:Planetary Orbit)"><%= currentPlanet.galaxy %>:<%= currentPlanet.system %>:<%= currentPlanet.position %> <i class="far fa-map fa-sm"></i></h4></div>
<div></div>
</div>
<div class="wrapper-navigation">
<a href="#" class=btn-nav id="mobile-hide"><i class="fas fa-envelope fa-lg"></i></a>
<a href="/overview" class=btn-nav title="Planet Overview"><i class="fas fa-globe-americas fa-lg"></i></a>
<a href="/building" class=btn-nav id="btn-active" title="Building Construction"><i class="fas fa-tools fa-lg"></i></a>
<a href="#" class=btn-nav><i class="fas fa-flask fa-lg"></i></a>
<a href="#" class=btn-nav><i class="fas fa-fighter-jet fa-lg"></i></a>
<a href="/map" class=btn-nav title="Map"><i class="fas fa-map fa-lg"></i></a>
<a href="#" class=btn-nav id="mobile-hide"><i class="fas fa-user-secret fa-lg"></i></a>
<a href="#" class=btn-nav id="mobile-hide"><i class="fas fa-balance-scale fa-lg"></i></a>
<a href="#" class=btn-nav><i class="fas fa-bars fa-lg"></i></a>
</div>
<div class="wrapper-operations">
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
<h4>00:00:00:00 </h4>
<h4>Colonize </h4>
<h4>1:232:10 </h4>
<h4>1:233:10 </h4>
</div>
<div class="wrapper-content">
<% for (i = 0; i < buildingInfo.length; i++) { %>
<% if (buildingInfo[i][0].requirements.race.some(function (item) {return item === user.race})) { %>
<% if (buildingInfo[i][0].type === currentPlanet.currentConstruction) { %>
<div class="content-building">
<div class="building-img">
<label><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type]].name[user.race] %></label>
<img src="pictures/<%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type]].img %>" id="<%= buildingInfo[i][0].type %>" title="Click for detailed information" width="100%" height=width>Level <%= currentPlanet[buildingInfo[i][0].type] %></img>
</div>
<div class="building-right">
<div class="building-values">
<h1 title="Carbon Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costCarbon %> <i class="fas fa-atom fa-sm"></i></h1>
<h1 title="Credit Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costCredit %> <i class="fas fa-yen-sign fa-sm"></i></h1>
<h1 title="Fuel Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costFuel %> <i class="fas fa-gas-pump fa-sm"></i></h1>
<h1></h1>
</div>
<form action="/building" method="POST" class="building-buttons">
<h4></h4>
<h1 id="CountdownTimer"></h1>
<h1><i class="fas fa-hourglass-half fa-sm"></i></h1>
</form>
</div>
</div>
<% } else if (currentPlanet.currentConstruction) { %>
<div class="content-building">
<div class="building-img">
<label><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type]].name[user.race] %></label>
<img src="pictures/<%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type]].img %>" id="<%= buildingInfo[i][0].type %>" title="Click for detailed information" width="100%" height=width>Level <%= currentPlanet[buildingInfo[i][0].type] %></img>
</div>
<div class="building-right">
<div class="building-values">
<h1 title="Carbon Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costCarbon %> <i class="fas fa-atom fa-sm"></i></h1>
<h1 title="Credit Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costCredit %> <i class="fas fa-yen-sign fa-sm"></i></h1>
<h1 title="Fuel Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costFuel %> <i class="fas fa-gas-pump fa-sm"></i></h1>
<h1 title="Construction Time" id="buildingTime<%= i %>"><i class="fas fa-hourglass-half fa-sm"></i></h1>
</div>
<form action="/building" method="POST" class="building-buttons">
<h4></h4>
<button type="submit" name="buyRequest" value="<%= buildingInfo[i][0].type %>" class="sub-std" title="Buy Building Level with Credits"><i class="fas fa-yen-sign fa-3x"></i></button>
<button type="submit" name="sellRequest" value="<%= buildingInfo[i][0].type %>" class="sub-std" title="Sell Building Level"><i class="fas fa-times fa-3x"></i></button>
</form>
</div>
</div>
<% } else { %>
<div class="content-building">
<div class="building-img">
<label><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type]].name[user.race] %></label>
<img src="pictures/<%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type]].img %>" id="<%= buildingInfo[i][0].type %>" title="Click for detailed information" width="100%" height=width>Level <%= currentPlanet[buildingInfo[i][0].type] %></img>
</div>
<div class="building-right">
<div class="building-values">
<h1 title="Carbon Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costCarbon %> <i class="fas fa-atom fa-sm"></i></h1>
<h1 title="Credit Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costCredit %> <i class="fas fa-yen-sign fa-sm"></i></h1>
<h1 title="Fuel Costs"><%= buildingInfo[i][currentPlanet[buildingInfo[i][0].type] + 1].costFuel %> <i class="fas fa-gas-pump fa-sm"></i></h1>
<h1 title="Construction Time" id="buildingTime<%= i %>"><i class="fas fa-hourglass-half fa-sm"></i></h1>
</div>
<form action="/building" method="POST" class="building-buttons">
<button type="submit" name="constructionRequest" value="<%= buildingInfo[i][0].type %>" class="sub-std" title="Build Building Level with Carbon and Fuel"><i class="fas fa-tools fa-3x"></i></button>
<button type="submit" name="buyRequest" value="<%= buildingInfo[i][0].type %>" class="sub-std" title="Buy Building Level with Credits"><i class="fas fa-yen-sign fa-3x"></i></button>
<button type="submit" name="sellRequest" value="<%= buildingInfo[i][0].type %>" class="sub-std" title="Sell Building Level"><i class="fas fa-times fa-3x"></i></button>
</form>
</div>
</div>
<% } %>
<% } %>
<% } %>
</div>
<div class="wrapper-info">
<%- include ('partials/partialBuildingInfo.ejs') -%>
</div>
<script>
////////////////////////////////
// CURRENT CONSTRUCTION TIMER //
////////////////////////////////
if (<%= currentPlanet.currentConstructionTime %> > 0) {
let constructionTime = Math.round((<%= currentPlanet.currentConstructionTime %> - Date.now()) / 1000);
const countdownEl = document.getElementById('CountdownTimer');
updateCountdown();
var currentConstructionCountdown = setInterval(updateCountdown, 1000);
function updateCountdown() {
let days = Math.floor(constructionTime / (24*60*60));
let hours = Math.floor(constructionTime / (60*60));
let minutes = Math.floor(constructionTime / 60);
let seconds = Math.floor(constructionTime % 60);
days = days < 10 ? '0' + days : days;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
if (constructionTime <= 0) {
clearInterval(currentConstructionCountdown);
countdownEl.innerHTML = `FINISHED`;
window.location.href = "/building";
} else {
countdownEl.innerHTML = `${days}:${hours}:${minutes}:${seconds}`;
constructionTime--;
}
}
}
/////////////////////////////////////////
// CONSTRUCTION TIME FOR EACH BUILDING //
/////////////////////////////////////////
setContructionTimes();
function setContructionTimes(){
for (var a = 0; a < <%= buildingInfo.length %>; a++) {
var constconstructionID = document.getElementById(`buildingTime${a}`);
var costCarbonCalc = <%= buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costCarbon %>;
var costFuelCalc = <%= buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costFuel %>;
var ressources = costCarbonCalc + costFuelCalc;
var construction = <%= currentPlanet.productionConstruction %> * <%= currentPlanet.bonusConstruction %>;
var constructionTime = (ressources*60*60) / construction;
let days = Math.floor(constructionTime / (24*60*60));
let hours = Math.floor(constructionTime / (60*60));
let minutes = Math.floor(constructionTime / 60);
let seconds = Math.floor(constructionTime % 60);
days = days < 10 ? '0' + days : days;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
constconstructionID.innerHTML = `${days}:${hours}:${minutes}:${seconds}`;
}
}
</script>
</body>
</html>
