为什么变量及其内容在HTML中不可见

Question

好的，我已经尝试了此代码的多次迭代，但无法正常工作，我在H3标签中看到了[object Object]

这从根本上将是显而易见的，我只是缺少一个核心要点，我一直在扫描堆栈，但似乎无法找到发生这种情况的原因

因此，我需要将从年份ID中检索到的项目显示在H3标签内，我使用警报功能作为测试来确保正确获取年份的值，并且

我试过了

var age ={};
    function ageinyear() {
        age = document.getElementById("year").value;
        var agetest = age;
    }</script>


<h3 id="userWelcome"><span id="splitColorHeading">
    Welcome <script> document.write(agetest)</script>,</span> to THE SESH</h3>

没有骰子

var age;
    function ageinyear() {
        age = document.getElementById("year").value;
    }</script>


<h3 id="userWelcome"><span id="splitColorHeading">
    Welcome <script> document.write(age)</script>,</span> to THE SESH</h3>

编辑：我在函数内部和外部都声明了两个变量，都试图使它们成为全局变量。屈曲我的小脑细胞可能是由于没有return语句，如果这样添加了一个我认为合适的变量，仍然没有运气

依然没有，

谁能帮助初学者进行演示和举例，或通过代码向我展示我所缺少的内容以及原因的解释

非常感谢！

更多代码：

<div id="overlay">
<div id="text">Are you over 18 years old?</div>
<div id="off"><button onclick="off(), ageinyear()">Submit</button></div>
<div id="test"><form>
    <label>
        Name
        <input id="name" name="lblname" type="text" />
    </label>
    <label>
        Age
        <input id="year" name="lblyear" type="text" />
    </label>
</form>
</div>

Answer 1

考虑您在此处定义的事件顺序：

<script>
var age;
function ageinyear() {
    age = document.getElementById("year").value;
}
</script>

<script>document.write(age)</script>

定义函数不会调用函数。 因此，基本上上述内容与此相同：

<script>
var age;
</script>

<script>document.write(age)</script>

没有值被写入页面，因为该变量中没有值。 已声明，但未定义。

而不是尝试立即输出到页面（例如，在用户设置值之前），而是输出到用户设置该值的函数中的页面。 像这样：

<script>
var age;
function ageinyear() {
    age = document.getElementById("year").value;
    document.getElementById("yearOutput").textContent = age;
}
</script>

<span id="yearOutput"></span>

Answer 2

通过使用var关键字为变量age加上前缀，该变量仅在包含它的<script>元素的范围内声明。 为了获得您需要的工作，您可以通过删除var关键字在全局范围内声明变量。

<script>
    age ={}; // declare the variable in the global scope - can access it anywhere
    function ageinyear() {
        age = document.getElementById("year").value;
    }
</script>


<h3 id="userWelcome"><span id="splitColorHeading">
    Welcome <script> document.write(age)</script>,</span> to THE SESH
</h3>

Answer 3

在下面的代码段中，您从HTML中获取输入，可以根据用例对其进行一些计算，然后修改HTML元素。

 <h3 id="change">to change</h3> <input id="age" type="number"/> <button onclick="change()">change</button> <script> function change() { var age = document.getElementById("age").value; //make a computation parseInt(age) + 1 document.getElementById("change").innerHTML = "hello" + age } </script> 

Answer 4

您正在尝试在编写document.write（age）时直接打印对象 ，age变量称为age.toString（），它返回[object object]。 采用

document.write(JSON.stringify(age))