Question

我刚刚测试了一些代码，但我无法解决这个问题：

<HTML>
<head>

<title> Page 1 </title>

<script>
function myFunction()
{
var x=document.getElementById("myEmail")
document.write(x)
}
</script>

</head>

<body>

<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>

<button type="button" onclick="myFunction()">Submit Email</button>

</body>

</HTML>

所有我想要的是让用户在文本中键入内容，由解析器读取，将其放入变量，然后在屏幕上打印变量。如果我知道这件事，我会对其他项目有所帮助。有人可以帮忙吗？注意：我不想使用HTML5，因为它删除了我喜欢的一些标签，所以我们可以使用HTML 4.01吗？

Answer 1

第1步是使用HTML 5，缩进代码，并使用分号。

<!DOCTYPE html>

<html>
    <head>
        <title> Page 1 </title>

        <script>
        function myFunction() {
            var x = document.getElementById("myEmail");
            document.write(x);
        }
        </script>
    </head>
    <body>
        <form>
            <p> Input your email </p>
            <input name="myEmail" type="text">
        </form>

        <button type="button" onclick="myFunction()">Submit Email</button>
    </body>
</html>

第2步是查看正在编写的内容，看看它是null，当document.getElementById返回null时意外，并意识到没有id的元素您文档中myEmail的{}它只有一个name。当你在它的时候放下表格。

<body>
    <p>Input your email </p>
    <input id="myEmail" type="text">
    <button type="button" onclick="myFunction()">Submit Email</button>
</body>

下一步是再次尝试，并意识到x是一个元素，而不是一个字符串，并且你想得到它的价值。

function myFunction() {
    var x = document.getElementById("myEmail");
    document.write(x.value);
}

“良好的未来实践”步骤没有特别的顺序：

将脚本放在底部并停止使用内联事件侦听器
将您的脚本放在外部文件中
使用<label>

如果你不打算做一些比写电子邮件更有用的事情，也可以考虑使用document.body.appendChild(document.createTextNode(…))，这不会删除文件的其余部分。 DOM非常棒。

Answer 2

在输入中添加ID

<input name="myEmail" type="text" id="myEmail">

然后写下值

document.write(x.value)

Answer 3

document.getElementById返回DOM元素。打印DOM元素没有意义，其输出可能因浏览器而异。

您想要的是打印输入字段的输入值，因此请检查value属性：

function myFunction()
{
var x=document.getElementById("myEmail").value
document.write(x)
}

其次，您的HTML代码在元素上没有ID属性，因此getElementById查找将失败。添加ID：

<input name="myEmail" type="text" id="myEmail">

关于HTML 4与HTML 5的说明。

注意：我不想使用HTML5，因为它删除了我喜欢的一些标签，所以我们可以使用HTML 4.01吗？

这个评论很有意思。如果不知道你指的是哪个标签，我不能说它们被删除的原因，但我想有可能是等价的。 HTML 5不会删除我所知道的任何HTML功能。

这就像是说你不会驾驶带有自动变速器的汽车，因为它没有离合器。

Answer 4

您所要做的就是添加一个id属性，其值与input type =“text”的name属性值相同，并修改脚本以存储值而不是元素本身。

<html>
<head>
<title> Page 1 </title>
<script>
    function myFunction()
    {
    var x=document.getElementById("myEmail").value;
    document.write(x);
    }
</script>
</head>
<body>
    <form>
    <p> Input your email </p>
    <input name="myEmail" id="myEmail" type="text">
    </form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>

读取输入和打印变量 - JavaScript和HTML 4.01

4 个答案: