[英]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>
</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.