html/javascript如何通过单击按钮的方法显示用户输入？_Javascript_Html

html/javascript如何通过单击按钮的方法显示用户输入？

javascript html

html/javascript如何通过单击按钮的方法显示用户输入？,javascript,html,Javascript,Html,我正在尝试获取一个警报窗口，以显示用户在单击“提交”后输入的名字和姓氏。我尝试使用javascript中的方法来实现这一点，但我无法在用户单击按钮后显示它这是我的密码： <html> <head> <meta charset = 'utf-8'> <title>Form</title> <script type = 'text/javascript'> var firstName;

我正在尝试获取一个警报窗口，以显示用户在单击“提交”后输入的名字和姓氏。我尝试使用javascript中的方法来实现这一点，但我无法在用户单击按钮后显示它

这是我的密码：

<html>
<head>
    <meta charset = 'utf-8'>
    <title>Form</title>
    <script type = 'text/javascript'>
        var firstName; //first name
        var lastName; //last name
        function getFirstName() { //get first name
            return document.getElementById("first_name").value;
        }
        function getSecondName()    { //get last name
            return document.getElementById("last_name").value;
        }
        function display()  { //get the names and display them
            firstName = getFirstName();
            lastName = getLastName();
            window.alert(firstName + lastName);
        }
        document.getElementById("Submit").onclick = display();
    </script>

</head>
<body>
    <form id='form' method = 'post'>
        <p> First Name: <input type='text' id = "first_name"/></p>
        <p> Last Name: <input type='text' id = "last_name"/> </p>
        <p><input id ="Submit" type = "button" value = 'clickme' /></p>
    </form>
</body>
</html>


形式
var名字//名字
var lastName//姓
函数getFirstName（）{//get first name
return document.getElementById（“first_name”）.value；
}
函数getSecondName（）{//get last name
返回文档.getElementById（“姓氏”）.value；
}
函数display（）{//获取名称并显示它们
firstName=getFirstName（）；
lastName=getLastName（）；
window.alert（firstName+lastName）；
}
document.getElementById（“提交”）.onclick=display（）；
名字：
姓氏：

试试这个

    <html>
<head>
    <meta charset = 'utf-8'>
    <title>Form</title>
    <script type = 'text/javascript'>
        var firstName; //first name
        var lastName; //last name
        function getFirstName() {   //when this function is called, I retrieve the values and display them
            return document.getElementById("first_name").value;
        }
        function getSecondName()    {
            return document.getElementById("last_name").value;
        }
        function display()  {
            firstName = getFirstName();
            lastName = getSecondName();
            window.alert(firstName + lastName);
        }

    </script>

</head>
<body>
    <form id='form' method = 'post'>
        <p> First Name: <input type='text' id = "first_name"/></p>
        <p> Last Name: <input type='text' id = "last_name"/> </p>
        <p><input id ="Submit" type = "button" value = 'clickme' onclick="display()" /></p>
    </form>
</body>
</html>


形式
var名字//名字
var lastName//姓
函数getFirstName（）{//调用此函数时，我检索值并显示它们
return document.getElementById（“first_name”）.value；
}
函数getSecondName（）{
返回文档.getElementById（“姓氏”）.value；
}
函数显示（）{
firstName=getFirstName（）；
lastName=getSecondName（）；
window.alert（firstName+lastName）；
}
名字：
姓氏：

将

脚本

移动到HTML之后，并更改处理程序以获取函数引用。您的姓氏函数也被命名为

getSecondName

，但您调用

getLastName

<html>
    <head>
    <meta charset = 'utf-8'>
    <title>Form</title>

</head>
<body>
    <form id='form' method = 'post'>
        <p> First Name: <input type='text' id = "first_name"/></p>
        <p> Last Name: <input type='text' id = "last_name"/> </p>
        <p><input id ="Submit" type = "button" value = 'clickme' /></p>
    </form>
    <script type = 'text/javascript'>
        var firstName; //first name
        var lastName; //last name
        function getFirstName() { //get first name
            return document.getElementById("first_name").value;
        }
        function getSecondName()    { //get last name
            return document.getElementById("last_name").value;
        }
        function display()  { //get the names and display them
            firstName = getFirstName();
            lastName = getSecondName();
            window.alert(firstName + lastName);
        }
        document.getElementById("Submit").onclick = display;
    </script>
</body>
</html>


形式
名字：
姓氏：

var名字//名字
var lastName//姓
函数getFirstName（）{//get first name
return document.getElementById（“first_name”）.value；
}
函数getSecondName（）{//get last name
返回文档.getElementById（“姓氏”）.value；
}
函数display（）{//获取名称并显示它们
firstName=getFirstName（）；
lastName=getSecondName（）；
window.alert（firstName+lastName）；
}
document.getElementById（“提交”）.onclick=display；

演示：

对javascript进行细微更改，以调用getSecondName而不是getLastName

您只需要获取输入值。Jsfiddle和下面的代码；

代码无法工作的主要原因是浏览器处理HTML文档中标记的顺序

在您的例子中，浏览器首先执行javascript代码，然后才呈现HTML表单及其输入。因此，如果您查看Chrome开发者控制台，您会发现一个错误：

uncaughttypeerror:无法将属性“onclick”设置为null（第19行）

。引发错误的原因是调用

document.getElementById（'Submit'）

null

要解决此问题，可以按照上面的建议将脚本标记移动到HTML代码下面，或者在加载窗口或正文后绑定

onclick

处理程序：


window.onload=函数（）{
document.getElementById（“提交”）.onclick=display；
}

注：如上所述，您应该将函数本身分配给

onclick

处理程序，而不是函数返回的值，如您最初的示例（

display

，而不是

display（）

）。


显示名字
函数shw（）{
变量rev、str、l、i；
str=document.getElementById（“name”）.value；
l=str.length；
对于（i=0；i更改为document.getElementById（“提交”）.onclick=display；，以引用函数。如果不是，则立即执行function@juvian我试过了，但它似乎没有改变任何东西。我很感谢您花时间考虑输入子bmit add on单击一个属性并删除您的文档。getElementById（“提交”）.onclick=display；codeIt起作用了！所以我想这只是我的一个语法错误-\ux-，而这段代码可能会回答这个问题，提供关于它如何以及为什么解决这个问题的额外上下文将提高答案的长期价值。
<form id='form' method = 'post'>
    <p> First Name: <input type='text' id = "first_name"/></p>
    <p> Last Name: <input type='text' id = "last_name"/> </p>
    <p><input id ="submit" type = "button" onclick="display()" value='clickme'/></p>
</form>

var firstName; //first name
var lastName; //last name
function getFirstName() {
    return document.getElementById("first_name").value;
}
function getSecondName() {
    return document.getElementById("last_name").value;
}
function display() {
    firstName = getFirstName();
    lastName = getSecondName();
    window.alert(firstName + lastName);
    document.getElementById("form").submit();

} 

document.getElementById("Submit").addEventListener("click", function(e){

e.preventDefault(); // to prevent form from submiting
fn = document.getElementById("first_name").value;
ln = document.getElementById("last_name").value;
alert(fn + " " + ln);

});