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

Reading inputs and printing variables - JavaScript and HTML 4.01

本文关键字：HTML JavaScript 变量 输入 打印 读取      更新时间：2023-09-26

我刚刚测试了一些代码，但我无法让它工作：

<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或其他东西吗？

第 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 真的很棒。

向输入添加 id

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

然后写入值

document.write(x.value)

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 功能。

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

您所

要做的就是添加一个与输入类型="text"的name属性的值具有相同值的id属性，并修改脚本以存储值而不是元素本身。

<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>
相关文章：