函数中返回未定义的Javascript全局对象

我在处理一个对象时遇到问题：

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

使用上述代码时，页面应显示20，但使用此代码时：

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

然后运行测试函数 它不起作用。相反，我在Chrome开发控制台中得到了这个错误：

未捕获的TypeError:无法读取未定义的属性“x”

有人知道我做错了什么吗？据我所知，这段代码没有任何问题，但正如我所看到的，它不起作用

[我在这个问题中加入了“范围”标签，因为我认为这可能与此有关]

编辑： 我不愿意提供完整的代码，但看来我会的。 问题可能就在于它目前有多混乱。 我从我制作的JavaScript游戏中复制了代码，现在正在制作一个新的。 因此，如果您想知道为什么这么多代码被注释掉，那就是原因。 希望这个问题会变得显而易见

首先：这是它加载的网页： 下面是源代码：

提醒一下，上面的代码块是示例，函数/变量名与我代码中的实际名称不匹配

---

在本例中，测试将表示draw_gui函数，页面变量无关紧要，因为问题的关键是为什么x未定义，而innerHTML部分只是为了明显地确认。

代码工作正常。在代码的其余部分中，肯定还有其他错误。下面是一段有用的信息：

var page=document.getElementById'example'； 变量p1_框={ x:20， y:20， 宽度：560， 身高：400 }; 功能测试{ page.innerHTML=p1_box.x； } 测验

---

我看到了另一件事，我不记得它被称为什么，它会去哪里，像这样：var thing=0；函数测试{dosomething with thing variable}var thing；}，它将返回undefined，因为它是在该函数中定义的，但稍后会返回。我检查过了，但事实并非如此。@Magicrafter13Gaming您在上面发布的代码没有任何问题。你的评论对你的问题没有帮助。您需要包括代码的其余部分以及如何调用testAre您指的是变量提升？是的，提升。@Magicrafter13Gaming如果您的测试函数中有一个var p1_框，请将其删除。如何/何处/何时运行测试？我已经尝试了元素的onload和刚刚进行的测试；在代码的底部，虽然我可以向您保证函数正在运行，因为我在chrome.neighet html中得到了错误，js文件也没有包含测试函数，并且您的代码抛出了一个错误，即inputfield.getElementById不是一个函数。问题是，由于该错误，您的p1_框永远无法定义。所以，首先解决这个问题！document.getElementByIdinput-field由于是HTMLElement，因此没有getElementById方法。只需使用document.getElementById，而不是inputfield.getElementById。使用hit F12并读取所有错误。请学习使用调试器。ID在整个页面中应该是唯一的