从HTML表单中获取文本并传递给JavaScript函数

Getting text from HTML form and pass to JavaScript function

本文关键字：JavaScript 函数 取文本 HTML 表单 获取      更新时间：2023-09-26

我正在学习HTML/JavaScript，并正在编写一个简单的网站来测试我迄今为止所学的内容。我试图从输入表单中获取用户输入的名字和姓氏，然后将这些名字传递给JavaScript函数，但由于某种原因，我在弹出窗口中看到的只是：

Hello[object HTMLInputElement]

这是我的html代码：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Daynesh's Test Site</title>
    <script>
        function addUser(first, last)
        {
        alert("Hello " + first);
        }
    </script>
    </head> 
    <body>
    <h1>Registered Users</h1>
    <p>Enter user name:</p>
    <form>First name: <input type="text" name="firstname">
      Last name: <input type="text" name="lastname">
        <input type="submit" value="Submit" onclick="addUser(firstname,'right')">
    </form>
    <hr>
    <h3>Output</h3>
    </body>
    </html>

有人能解释一下我做错了什么吗？我确信这是一件非常简单的事情，我在这里不理解。

提前感谢！

在您的代码中

onclick="addUser(firstname,'right')"

firstname不是以前没有定义过的，所以应该用javascript或直接从输入中获取值这是修复后的代码

  <!DOCTYPE html>
<html>
<head>
    <title>Daynesh's Test Site</title>
<script>
    function addUser(first, last)
    {
    alert("Hello " + first);
    }
</script>
</head> 
<body>
<h1>Registered Users</h1>
<p>Enter user name:</p>
<form>First name: <input type="text" name="firstname" id="firstname">
  Last name: <input type="text" name="lastname">
    <input type="submit" value="Submit" onclick="addUser(document.getElementById('firstname').value,'right')">
</form>
<hr>
<h3>Output</h3>
</body>
</html>

我希望我的答案能帮助你

document.getElementByName('firstname').value

请访问以下网址查看更详细的答案：JavaScript:如何获取文本输入字段的值？

相关文章：