2013-12-11 130 views
0

我是一個全新的HTML和JavaScript,並且試圖創建一個簡單的計算器,其輸出隨後要繪製。爲了達到這個目的,我似乎需要將一個變量從一個腳本傳遞到另一個腳本,但無法實現這一點。 我已經成功地編譯了一些代碼,我認爲我可以使用它來擴展計算以實現我所需要的功能,並且我找到了一個有用的chartjs模板來創建簡單的條形圖。但是,例如,當我嘗試用我的sngTotal變量覆蓋圖表的靜態輸入時,該變量在第二個腳本中似乎沒有被識別。我試圖將sngTotal定義爲全局變量,但它要麼不能正常工作,要麼我沒有正確定義它。任何幫助將非常感激。將JavaScript變量從一個腳本傳遞到另一個腳本

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

你在哪裏使用第二個腳本中的sngTotal? –

+0

另外請注意,你似乎並沒有關閉你的表,表格或fieldset標籤 – jasonscript

回答

1

要使一個全局變量有幾個選項

sngTotal = 0; 
^ leave out the var 

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

兩種方法導致被宣佈爲全局變量。

注:創建全局變量通常是在因爲它會導致代碼更難皺起眉頭保持

  • 不知道哪裏變量聲明/初始化
  • 變量可以被其他覆蓋意外時刻的腳本
+0

這兩種方法都是正確的。如果變量是在全局上下文中而不是在函數中創建的,你也可以使用var。 – eyurdakul

0

您的代碼有問題。處理按鈕點擊的部分在圖表已經被渲染後運行。你沒有看到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); 
} 
+0

就是這樣。組合這兩個函數,使按鈕執行計算以及渲染圖形。謝謝您的幫助 – user3089117

0

很可能sngTotal在您的第二個腳本的某處被覆蓋。如果是這種情況,定義全局變量將無濟於事。我的建議是追蹤它,看看它在哪裏宣佈。

相關問題