Question

我正在测试并试图制作一个小表格，当用户输入他们的名字时，它会取名并将其显示在屏幕上。

<html>
<head>
    <center><h1>Test-Page</h1></center>
</head>
<body>
    <div class="someRandomStuff">
    <h2 id="testingID">What is your first name?</h2>
    <form name="input" action="login.js" method="post">
        Name: <input type="text" name="userID"/>
        <input type="submit" value="Submit"/>
    </form>
    </div>
</body>

这是js文件

function displaySystem(name) {
    document.getElementById("testingID").innerHTML("Ah, hello there" + name)
}

我知道我可以在一个HTML文件中执行此操作，但是我想尝试将js和HTML分开。任何帮助表示赞赏。

Answer 1

您不会将数据发送到JavaScript函数，但JavaScript函数可以检索表单数据。

例如，可以使用text属性检索类型value的输入：

var input = document.getElementById("userID");
var value = input.value;

我知道我可以在一个HTML文件中执行此操作，但是我想要尝试将js和HTML分开。

很好的一步。实际上，在从内联脚本或使用<script src=...元素包含的脚本中检索表单数据或操作文档方面没有实际区别。主要区别在于HTML文档中嵌入的脚本不会被缓存，而作为单独文件包含的脚本将被缓存（显然，如果我们谈论关注点的良好分离，还有其他原因！）

Answer 2

在文本框上使用onkeypress事件并传递它以显示该值并在函数中使用该参数来显示它

   <div class="someRandomStuff">
        <h2 id="testingID">What is your first name?</h2>
        <form name="input" action="login.js" method="post">
            Name: <input type="text" name="userID" onkeypress="displaySystem(this)"/>
            <input type="submit" value="Submit"/>
        </form>
        </div>

// javascript功能

function displaySystem(name) {
    document.getElementById("testingID").innerHTML("Ah, hello there" + name.value)
}

如何使用<form>标签将数据发送到javascript函数？</form>

2 个答案: