Question

我正在创建一个包含两个数字字段的html文档。

用户输入数字信息，然后单击激活单独的 .js 文件上的方法的按钮。我遇到的问题是，每次输入数据并按下按钮，它都会将数据返回为NULL。

这就是我所拥有的：

<html>
<head>
</head>
<body>

<h1>Retirement calculation page!</h1>
<p class="a">Enter the information below to find out how much money you will have for retirement</p>

<form name="form1">
        Enter Age: <input type ="number" name="age1" min="1" max="125">
</form>
<form name="form2">
        Enter Contribution amount: <input type="number" name="cont1">
</form>
<button onclick="rFunction()">Submit</button>
<script src="retirement.js"></script>
</body>

</html>

以下是 .js 文件中的方法。

function rFunction()
{
        var age = document.getElementById("age1");
        var cont = document.getElementById("cont1");

        document.write("Age = " + age );
        document.write("Cont = " + cont );

}

我做错了什么？

Answer 1

您需要将name属性替换为Id属性：

<form name="form1">
        Enter Age: <input type ="number" id="age1" name="age1" min="1" max="125">
</form>
<form name="form2">
        Enter Contribution amount: <input type="number" id="cont1" name="cont1">

这将允许您通过其id（getElementById）获取元素。

Answer 2

您没有将ID应用于任何字段，当您查找该值时，您会找到一个DOM对象，但您需要该值。像这样更改HTML：

<form name="form1">
        Enter Age: <input type ="number" id="age1" name="age1" min="1" max="125">
        Enter Contribution amount: <input type="number" id="cont1" name="cont1">
</form>
<button onclick="rFunction()">Submit</button>

并像这样修改你的JS：

    var age = document.getElementById("age1").value;
    var cont = document.getElementById("cont1").value;

BTW - 您不需要两个表单声明。

Answer 3

你正在使用

name="age1"

何时使用

id="age1"

它叫做getElementById。

document.getElementById似乎返回null

3 个答案: