CODEWITHSUNDEEP
javascriptvariables
user3089117
user3089117

Reputation: 21

Passing a javascript variable from one script to another

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>

Upvotes: 0

Views: 3423

Answers (3)

beautifulcoder
beautifulcoder

Reputation: 11340

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.

Upvotes: 0

John Wu
John Wu

Reputation: 52280

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

Upvotes: 0

jasonscript
jasonscript

Reputation: 6178

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

Upvotes: 1

Related Questions