JS：输入用户名并打印出来答案

【问题标题】：JS: Input user name and print it outJS：输入用户名并打印出来
【发布时间】：2015-07-02 22:32:29
【问题描述】：

我是 JS 的初学者。我尝试从 HTML 表单中获取输入。并从函数中打印出单词。我在 W3 中读过 JS。但是，它总是出错。谁能帮帮我。

HTML - 关于表单

<form method="get">
<h2>Please leave your contact information for us</h2>

<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>

<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>

<label for="email">E-mail:</label>
<input type="e-mail" id="email" name="eMail"><br>


<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>

<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea>
<br>
<br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" onclick="welcome()">Give Us Help</button>

</form>

我的 JS 代码

var first = document.getElementById("FirstName");
var last = document.getElementById("LastName");     

function welcome(){

    var welcomeF = "Welcome" + first +" "+ last;
    return welcomeF;

}

console.log(welcome());

【问题讨论】：

标签： javascript getelementbyid input-field

【解决方案1】：

使用 first.value 获取元素的值 & 使用 onSubmit 属性而不是使用 onclick。

看看这段代码，我对你的代码做了一些改动。

Java脚本：

    function welcome(){
    var first = document.getElementById("FirstName").value; 
    var last = document.getElementById("LastName").value;
    var welcomeF = "Welcome " + first +" "+ last;
    console.log(welcomeF);
    window.alert(welcomeF);
    return false; //To prevent it from going into next page.
}

HTML：

    <form  onSubmit = "return welcome();">
    <h2>Please leave your contact information for us</h2>

    <label for="FirstName">First Name:</label>
    <input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>

    <label for="LastName">Last Name:</label>
    <input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>

    <label for="email">E-mail:</label>
    <input type="e-mail" id="email" name="eMail"><br>


    <label for="password">Password:</label>
    <input type="password" id="password" name="passWord"><br>

    <label for="suGession">sub gesstion:</label><br>
    <textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea><br><br>
    <p>What do you usually cook?</p>
    <input type="text">
    <button type="submit" >Give Us Help</button>

【讨论】：

非常感谢 Shehroz Sheikh 现在可以使用了！！能否请教一下使用onsubmit和click的区别？
OnSubmit 用在表单上，表示要提交信息到服务器。如果在onSubmit函数中返回false，页面信息不会发送到服务器。我们主要使用'return false;'如果我们正在验证用户是否输入了正确的数据！我的意思是通过javascript进行验证。然而，onclick 可以用于任何事情，但有时它不会帮助您进行验证。

【解决方案2】：

你需要改变：

var welcomeF = "Welcome" + first +" "+ last;

到：

var welcomeF = "Welcome" + first.value +" "+ last.value;

first 和 last 只是对 dom 节点的引用，而不是其中的值

【讨论】：