簡體   English   中英

將JavaScript變量從一個腳本傳遞到另一個腳本

[英]Passing a javascript variable from one script to another

我對html和javascript完全陌生,並試圖創建一個簡單的計算器,隨后我要對其輸出進行圖形處理。 為了實現這一點,我似乎需要將變量從一個腳本傳遞到另一個腳本,但是無法實現這一點。 我設法將一些代碼編譯在一起,我認為我可以使用它們擴展計算以實現所需的功能,並且找到了有用的chartjs模板來創建簡單的條形圖。 但是,例如,當我嘗試使用sngTotal變量覆蓋圖表的靜態輸入時,似乎在第二個腳本中無法識別該變量。 我試圖將sngTotal定義為全局變量,但是它要么無法正常工作,要么我沒有正確定義它。 任何幫助將非常感激。

<html>
<head>
<title> Savings </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/globalize.min.js"></script>
    <script src="js/dx.chartjs.js"></script>
</head>

<script language="javascript">

    function btnCalculateTotal_Click() {
        var houses = 0;
        var cars = 0;
        var sngTotal = 0;
        houses = Number(frmSimpleCalculator.txtValue1.value);
        cars = Number(frmSimpleCalculator.txtValue2.value);
        sngTotal = houses + cars
        frmSimpleCalculator.txtTotal.value = sngTotal;
    }
</script>

<body bgcolor="#aaaaaa">

    <table style="background-color:black; color:white; width:800">
        <tr>
            <td><strong>calculator</strong></td>
        </tr>
    </table>

<form name="frmSimpleCalculator" action="" method="get">
    <fieldset name="fraSimpleCalculator" style="width:1"><legend>Economic Savings Calculator</legend>
    <table width="300" border="0">
    <tr>    <!-- Value 1 -->
        <td align="left">Houses:</td>
        <td align="right"><input type="text" value="500" name="txtValue1" size="10" maxlength="5" style="text-align:right"></td>
    </tr>
    <tr>    <!-- Value 2 -->
        <td align="left">Cars:</td>
        <td align="right"><input type="text" value="25" name="txtValue2" size="10" maxlength="5" style="text-align:right"></td>
    </tr>
    <tr>    <!-- Horizontal rule -->
        <td align="center" colspan="2"><hr /></td>
    </tr>
    <tr>    <!-- Total -->
        <td align="left">Total:</td>
        <td align="right"><input type="text" value="0" name="txtTotal" size="10" maxlength="5" style="text-align:right"></td>
    </tr>
    <tr>    <!-- Calculate Button -->
        <td align="center" colspan="2">
            <input type="button" value="Calculate Total" name="btnCalculateTotal" style="width:150" OnClick="btnCalculateTotal_Click();">
        </td>
    </tr>

<script>
    $(function ()  {
        var dataSource = [
            { savings: "", Houses: 500, Cars: 300 },
        ];

        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: "savings",
                type: "bar",
                hoverMode: "allArgumentPoints",
                selectionMode: "allArgumentPoints",
                label: {
                    visible: true,
                    format: "fixedPoint",
                    precision: 0
                }
            },
            series: [
                { valueField: "Houses", name: "Houses" },
                { valueField: "Cars", name: "Cars" }
            ],
            title: "Savings potential",
            legend: {
                verticalAlignment: "bottom",
                horizontalAlignment: "center"
            },
            pointClick: function (point) {
                this.select();
            }
        });
    });
</script>

<div class="title">
    <h1>savings</h1>&nbsp;&nbsp;&nbsp;
</div>
<div class="content">
    <div class="pane">
        <div class="long-title"><h3></h3></div>
        <div id="chartContainer" style="width: 250px; height: 440px;" style="position:absolute; TOP:200px; LEFT:350px"></div>       
    </div>
</div>
</body>
</html>

要創建全局變量,有兩種選擇

sngTotal = 0;
^ leave out the var

要么

window.sngTotal = 0;
^ add to the window object

這兩種方法都會導致聲明一個全局變量。

注意:通常不贊成創建全局變量,因為它會導致難以維護的代碼

  • 不知道在哪里聲明/初始化變量
  • 變量可能會在意外時間被其他腳本覆蓋

您的代碼有問題。 在圖表已呈現后,將運行處理按鈕單擊的部分。 您尚未看到sngTotal,因為用戶尚未點擊。

我建議您修改btnContinue_Click,以便它調用代碼以呈現圖表。 在計算總數后應執行此操作。

function btnCalculateTotal_Click()
{
    var houses = 0;
    var cars = 0;
    var sngTotal = 0;
    houses = Number(frmSimpleCalculator.txtValue1.value);
    cars = Number(frmSimpleCalculator.txtValue2.value);
    sngTotal = houses + cars
    frmSimpleCalculator.txtTotal.value = sngTotal;

    $("#chartContainer").dxChart(etc. etc);
}

sngTotal很可能在第二個腳本中的某處被覆蓋。 在這種情況下,定義全局變量將無濟於事。 我的建議是跟蹤它,並查看它的聲明位置。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM