Невозможно объединить i для переменной l oop и e js в разделе скриптов на веб-сайте - PullRequest
1 голос
/ 11 июля 2020

Надеюсь, этого вопроса еще нет, но я почти уверен, что где-то он есть. Тем не менее, я честно попытался найти его, но мне трудно найти правильные слова, чтобы что-то найти.

Цель Я хочу использовать два объекта для вычислений в скрипте раздел, который я перешел с роутинга на сайт е js. Эти объекты называются "currentPl anet" и "buildingInfo", и я хотел бы l oop через те, которые находятся внутри for l oop.

Situation Пока я могу использовать эти объекты в точности так, как я хочу, в разделе html, я не могу сделать это в разделе скрипта. Однако на самом деле я могу получить всю необходимую информацию из этих объектов, но только если я использую определенные c числа вместо l oop i. Кроме того, я использую i в той же функции для других целей, и это работает. Скрипт находится внутри тела в самом конце.

Работает

var costCarbonCalc = <%= buildingInfo[1][currentPlanet[buildingInfo[1][0].type] + 1].costCarbon %>;

Не работает

var costCarbonCalc = <%= buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costCarbon %>;

=> a не определено (это мое для l oop целое число)

var costCarbonCalc = buildingInfo[a][currentPlanet[buildingInfo[a][0].type] + 1].costCarbon;

=> buildingInfo не определено

Код интереса

<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>

Готовое здание. E js

<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>

1 Ответ

0 голосов
/ 21 июля 2020

Вы можете получить доступ к переменной в части html, потому что она разрешается на сервере, компилируется в stati c html и css, а затем отправляется в браузер.

Если вы хотите получить к нему доступ в части скрипта, запущенной в браузере, вам нужно запросить его с сервера, то есть через запрос ajax.

...