Question

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

Answer 1

要制作全局变量，有几个选项

sngTotal = 0;
^ leave out the var

或

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

这两种方法都会导致声明一个全局变量。

注意：创建全局变量通常不受欢迎，因为它会导致代码难以维护

不知道声明/初始化变量的位置
变量可能会在意外时间被其他脚本覆盖

Answer 2

您的代码有问题。处理按钮点击的部分在图表已经渲染后运行。你没有看到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);
}

Answer 3

在您的第二个脚本中，某些地方可能会覆盖sngTotal。如果是这种情况，定义全局变量将无济于事。我的建议是跟踪它并查看它的声明位置。

将javascript变量从一个脚本传递到另一个脚本

3 个答案: