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, Feb 26 '18 at 23:59
Whenever you have an issue like this, always try it in jsfiddle or some other similar. You'll see the issue is not the code you list here (this is why we ask for an MCVE: https://stackoverflow.com/help/mcve) — KayakinKoder, Feb 26 '18 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, Feb 27 '18 at 00:09
I am aware there is no test function, that was used as an example. and I don't know what's wrong with the getElementById part. — Matthew, Feb 27 '18 at 00:10
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)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Please learn to use the debugger. — Sebastian Simon, Feb 27 '18 at 00:18
for @Xufox : But what if where is another element with the same Id elsewhere in the html? EDIT: okay fixing that appearantly did fix the error. But why would an error like that affect another variable? — Matthew, Feb 27 '18 at 00:19
Possible duplicate of [Why does getElementById not work on elements inside the document element?](https://stackoverflow.com/questions/16475636/why-does-getelementbyid-not-work-on-elements-inside-the-document-element) — Sebastian Simon, Feb 27 '18 at 00:20
@Magicrafter13Gamingg Then you have invalid HTML that your JS won’t work with. IDs ***must*** be unique. If not, fix that. — Sebastian Simon, Feb 27 '18 at 00:21
@Magicrafter13Gaming Because a script won’t continue when it encounters an error. — Sebastian Simon, Feb 27 '18 at 00:22
And the question is not a duplicate of that, because I was not asking anything about that. That may have been the end problem, but in the end my question was about something completely different. — Matthew, Feb 27 '18 at 00:22
@Magicrafter13Gaming I’m sorry, but your question boils down to this. There’s no way around it. — Sebastian Simon, Feb 27 '18 at 00:23
I might have some time to debug the live site; what user interaction is needed to create the error? (meaning: what do I gotta click/do on the page to create the error) — KayakinKoder, Feb 27 '18 at 03:49
@KayakinKoder my problem has been solved, it was due to a different unrelated script error that caused the rest of it to not work — Matthew, Feb 27 '18 at 05:25

score 4 · Accepted Answer · answered Feb 26 '18 at 23:54

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 '18 at 23:54

jas7457

1,712
13
21

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. – Matthew Feb 26 '18 at 23:55
@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()` – Craicerjack Feb 26 '18 at 23:58
Are you referring to variable hoisting? – jas7457 Feb 27 '18 at 00:04
Yeah, hoisting. – Matthew Feb 27 '18 at 00:04
@Magicrafter13Gaming If you have a `var p1_box` in your `test` function, remove it. – Sebastian Simon Feb 27 '18 at 00:05
Do you *redeclare* p1_box anywhere without *redefining* it? – jas7457 Feb 27 '18 at 00:06
Hoisting: [Surprised that global variable has undefined value in JavaScript](https://stackoverflow.com/q/9085839/4642212). – Sebastian Simon Feb 27 '18 at 00:06
I'm 99% sure I don't redeclare it, I searched the file and the only references to p1_box is the definition, and the call for it later down in the draw_gui function – Matthew Feb 27 '18 at 00:08

Javascript global object returning undefined in function

1 Answers1