Passing a javascript variable from one script to another

Question

I am a totally new to html and javascript and am attempting to create a simple calculator whose output I subsequently want to graph. To achieve that I seem to need to pass a variable from one script to another, but can not manage to achieve this. I have managed to compile some code together that I think I can use to expand the calculations to achieve what I need and I have found a helpful chartjs template to create a simple bar chart. However, when I try to override the static input for the chart with my sngTotal variable, for example, the variable does not seem to get recognized in the second script. I attempted to define sngTotal as a global variable, but it either did not work properly or I did not define it properly. Any help would be much appreciated.

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

Also note that you don't seem to be closing your table, form or fieldset tags — jasonscript
– jasonscript, Commented Dec 11, 2013 at 1:35

jasonscript · Accepted Answer · 2013-12-11 01:29:26Z

1

To make a global variable there are a couple of options

sngTotal = 0;
^ leave out the var

or

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

both methods result in a global variable being declared.

NOTE: creating global variables is usually frowned upon because it leads to code that is harder to maintain

Don't know where variables are declared/initialised
Variables can be overwritten by other scripts at unexpected times

answered Dec 11, 2013 at 1:29

jasonscript

6,2063 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eyurdakul Over a year ago

both methods are correct. you can also use var if the variable is created in the global context instead of in a function.

John Wu · Accepted Answer · 2013-12-11 01:30:51Z

0

You code has a problem. The part that handles the button clicks runs after the chart has already been rendered. You're not seeing sngTotal because the user hasn't clicked yet.

I'd suggest you modify btnContinue_Click so that it calls the code to render the chart. It should do this after the total is computed.

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);
}

answered Dec 11, 2013 at 1:30

John Wu

52.5k8 gold badges50 silver badges92 bronze badges

1 Comment

user3089117 Over a year ago

That's it. Combining both functions such that the button executes the calculations as well as rendering the graph did the trick. Thanks for the help

beautifulcoder · Accepted Answer · 2013-12-11 01:34:57Z

0

It is likely sngTotal is getting overwritten somewhere in your second script. Defining global variables won't help if this is the case. My recommendation is to trace it and see where it is being declared.

answered Dec 11, 2013 at 1:34

beautifulcoder

11.4k3 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Passing a javascript variable from one script to another

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related