Javascript global object returning undefined in function

Question

I'm having trouble with an object:

var page = document.getElementById('example');
var p1_box = {
    x: 20,
    y: 20,
    width: 560,
    height: 400
};
page.innerHTML = (p1_box.x);

when using the above code, the page shows 20 as it should, however when I use this code:

var page = document.getElementById('example');
var p1_box = {
    x: 20,
    y: 20,
    width: 560,
    height: 400
};
function test(){
    page.innerHTML = (p1_box.x);
}

(and then run the test function) it doesn't work. And I instead get this error (in the Chrome dev console:)

Uncaught TypeError: Cannot read property 'x' of undefined

anyone know what I am doing wrong? As far as I can tell there is nothing wrong with this code, and yet as I am being shown, it is not working.

[I included the 'scope' tag with this question since I thought it might have something to do with that]

EDIT: I was reluctant to provide the full code, but it appears I will. The problem may just lie in how messy it is currently. I copied the code from a game I made JavaScript and am making a new one. So if you are wondering why so much of the code is commented out, that would be why. Hopefully with this the problem will become obvious.

First off: here's the webpage where it loads: http://oldforgeinn.ddns.net/games/?game=battleship and here's the source code: http://oldforgeinn.ddns.net/scripts/SO_file.js

And a reminder, that the code blocks above are examples, and the function/variable names don't match the actual ones in my code.

in this case test() would represent the draw_gui() function, and the page variable doesn't matter, as the point of this question was why x is undefined, and the innerHTML part is just to visibly confirm.

I have tried both onload (for an element) and just doing test(); at the bottom of the code, though I can assure you the function is being run since I'm getting the error in chrome. — Matthew
– Matthew, Commented Feb 26, 2018 at 23:59
neighet the html, nor the js file contain a test function, and you code throws an error that inputfield.getElementById is not a function — Thomas
– Thomas, Commented Feb 27, 2018 at 0:09
The problem is, your p1_box never gets to be defined due to that error. So fix that first! document.getElementById("input-field"), since it’s an HTMLElement, doesn’t have a getElementById method. Just use document.getElementById, not inputfield.getElementById. Use the browser console (dev tools) (hit F12) and read any errors. Please learn to use the debugger. — Sebastian Simon
– Sebastian Simon, Commented Feb 27, 2018 at 0:18

jas7457 · Accepted Answer · 2018-02-26 23:54:30Z

4

That code works fine. There must be something else that you're doing wrong in the rest of your code. Here's a snippet of it working:

var page = document.getElementById('example');
var p1_box = {
    x: 20,
    y: 20,
    width: 560,
    height: 400
};
function test(){
    page.innerHTML = (p1_box.x);
}

test();

<div id="example"></div>

answered Feb 26, 2018 at 23:54

jas7457

1,80217 silver badges22 bronze badges

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

8 Comments

Matthew Over a year ago

I have seen another thing (I don't remember what it was called) where it would go something like this: var thing = 0; function test(){ {do something with thing variable} var thing; } and it would return undefined due to it being defined in that function, but coming later. I checked though and this is not the case.

Craicerjack Over a year ago

@Magicrafter13Gaming there is nothing wrong with the code as you have posted it above. Your comment does not help with your problem. You need to include the rest of your code and how you are calling test()

jas7457 Over a year ago

Are you referring to variable hoisting?

Matthew Over a year ago

Yeah, hoisting.

Sebastian Simon Over a year ago

@Magicrafter13Gaming If you have a var p1_box in your test function, remove it.

|

Collectives™ on Stack Overflow

Javascript global object returning undefined in function

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related