0

i have created a javascript function to take json variables and do 'Stuff' with them http://jsfiddle.net/57fXb/1/#&togetherjs=5vxD5KeLBa

Here is the function code

function Machinecycle(ZW, Number) {
    var machines = {
        "Machines": [
            {"cycle":1,"percent":1},
            {"cycle":2,"percent":-2},
            "cycle":3,"percent":3}
        ]
    };
    // obj = JSON.parse(machines);
    var cycle = machines.Machines[Number].cycle;
    var percent = machines.Machines[Number].percent;

    if (cycle < 480) {
        document.getElementById('ZW01001').style.backgroundColor = 'lime';
        document.write(cycle);
        document.write(percent);
    } else {
        document.getElementById('ZW01001').style.backgroundColor = 'red';
    }
}

When running this code as Machinecycle('ZW01001',0): ZW01001 being the Id of the Div and 0 being the records that is needed out of the JSON i get the error

Uncaught TypeError: Cannot read property 'style' of null

which i am assuming that is because it cant find the Div with the Id given to the function but i cant figure out why, this is running in it's own JavaScript file, however i also tried it in the html file with no success any help would be much appropriated

War10ck
  • 12,387
  • 7
  • 41
  • 54
Josh Kirkpatrick
  • 179
  • 9
  • 1
    Yep, if `getElementById` returns null, an element with that ID doesn't exist (yet). Not much we can do about it. Make sure the ID is correct and that you call the function at a moment when the element exists. – Felix Kling Jul 15 '14 at 14:55
  • 1
    I formatted your object above. There is a syntax error. You're missing a `{` before the last object in _Machines_. In addition, try running `document.getElementById('ZW01001')` in your console and see what it outputs. Sounds like the `
    ` doesn't exist or maybe it hasn't been added to the page at the time that you're running this script...
     – War10ck Jul 15 '14 at 14:56
  • 1
    [I've managed to get it working](http://jsfiddle.net/57fXb/3/). Are you calling the script after the DOM has loaded? – Andy Jul 15 '14 at 14:57
  • FYI your JSFiddle doesn't work because you are not defining the function in global scope. The error you get is different from the one you mentioned here: `ReferenceError: Machinecycle is not defined`. Looks like a good opportunity to improve your debugging skills. Read these articles to [learn](http://juliepagano.com/blog/2014/05/18/javascript-debugging-for-beginners) [how to](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) [**debug** JavaScript](https://developers.google.com/chrome-developer-tools/docs/javascript-debugging). – Felix Kling Jul 15 '14 at 14:59
  • This question is either a duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) or [jsFiddle: no connection between html and js? Can't call simple function from button?](http://stackoverflow.com/q/14499783/218196) (or both) – Felix Kling Jul 15 '14 at 15:04
  • @Andy i managed to get it working with the use of your edit thank you – Josh Kirkpatrick Jul 15 '14 at 15:04

1 Answers1

1

The problem is that you're passing ZW01001 instead of 'ZW01001'.

What you want to pass is a string but you're passing a variable that doesn't exist. It's the same as typing Machinecycle(undefined, 0);.

Edit: Looking at your code, you aren't even using the ZW variable. I believe you meant to pass it to document.getElementById.

Mike Cluck
  • 31,869
  • 13
  • 80
  • 91
  • 1
    I actually typed it wrong in the question im passing it like this That should fix what your saying right? – Josh Kirkpatrick Jul 15 '14 at 14:53
  • You're right but I just realized he isn't even using the passed in variable. @JoshKirkpatrick Check my edit. – Mike Cluck Jul 15 '14 at 14:56