0

Basically, I'm having trouble getting information from an input box and using that variable within an object literal.

Here is my code:

$("document").ready(function() {

    function updateEvent(){
        render();
    }

    function render() {
                     //get values from input
            var gallons = $("#gallons").val();
            var electricity = $("#electricity").val();
            var energy = $("#energy").val();

        var figure = new Highcharts.Chart({

            series: [{
                    name: 'Throttle',
                    data: [0, 0, 30 , 0, energy, 30, 0, 0] //Variables will not work in here, no specific error but data doesn't show
                }, {
                    name: 'Power',
                    data: [30, 30 , 30, 30, 30, 30, 30, 30]
                }]

        });

I've tried embedding a function and doing other tricks but nothing has worked, I could be doing it wrong, I'm not sure. Is there any way to use a variable within an object literal without completely re-coding the structure.

Any help would be greatly appreciated.

surfmuggle
  • 5,527
  • 7
  • 48
  • 77
tsa256
  • 1
  • 1
  • 2
    What do you mean it does not work? I just did `var energy='foo'` and tested `series` declaration - it worked. `energy` variable should work because it is inside scope of the same function. What kind of error do you get? – mvbl fst Oct 26 '12 at 05:57
  • 1
    syntax looks fine to me, except for $("document") which should be $(document) . Have you tried stepping through the code using something like chrome developer tools or firebug (firefox)? – Roland Bouman Oct 26 '12 at 05:57
  • so most likely all of your variables are being treated as strings and Highcharts is expecting numbers in the data - you can convert to a int or float by multiplying by 1 or using `parseFloat()` or `parseInt()` – Geek Num 88 Oct 26 '12 at 05:58
  • Hi all, thanks for the prompt responses. I am currently trying the suggestions and making sure I've tested it correctly. With regards to your questions. It seams as though the energy variable is not being interpreted as a number. I've stepped through the code and it seams to be a problem with the line "data: [0, 0, 30 , energy, 0, 30, 0, 0]" although I don't get a specific error code. I heard that it is illegal for a variable to be in a object literal. See http://stackoverflow.com/questions/2873163/is-this-javascript-object-literal-key-restriction-strictly-due-to-parsing but not 100% about it. – tsa256 Oct 26 '12 at 06:08
  • Geek Num 88 has provided the solution to this problem. By adding parseFloat() to the variables it has solved the problem The code now functions as intended. Thanks to all, hope people can learn from my errors. Cheers! P.S I would have posted a solution but can not for another 7 hours. New member here :) – tsa256 Oct 26 '12 at 06:18
  • In regards to question 2873163 cited above, that refers to the use of variables as property names in object literals. Variables and even expressions are perfectly valid as property values. – HBP Oct 26 '12 at 06:23
  • @tsa256 Could you solve the issue? Do you need any more explanations regarding my answer? – surfmuggle Nov 11 '12 at 18:00

1 Answers1

1

How to get a value from an input box and use that value within an object literal?

function doStuff(){
      var realIncome = document.getElementById("income").value;
      var objLit= { realIncome: realIncome,
                 desiredIncome: realIncome * 4 };
      console.log(objLit);
      document.getElementById("out").innerText = 
            objLit.realIncome + " " + objLit.desiredIncome;
 }

And the HTML

Big Number 
<input id="income" name="income" type="number" 
    placeholder="please enter your desired income">
<button name="calculate" onclick="doStuff()">click me </button>​

Your income <span id="out"></span><br />

Please take a look at my demo code: http://jsfiddle.net/mppAM/2/

surfmuggle
  • 5,527
  • 7
  • 48
  • 77