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

我试图获得一个警告窗口，显示用户在点击“提交”后输入的名字和姓氏。我试图在javascript中使用方法来做到这一点，但我无法在用户单击按钮后显示它。html/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>

来源

2014-10-07 Oscar A Garcia

更改为'document.getElementById（“Submit”）。onclick = display;'引用该函数。如果没有，它立即执行功能 – juvian 2014-10-07 20:20:05

@juvian我试过了，它似乎没有改变任何东西。我很感激你的时间 – 2014-10-07 20:27:23

http://jsfiddle.net/wqymjL32/

<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>

稍有变化的HTML，使onclick属性/事件添加到提交按钮。

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(); 

}

给JavaScript稍有变化调用getSecondName代替getLastName

来源

2014-10-07 20:32:26

它的工作！所以我猜这只是我的一部分语法错误-_- – 2014-10-07 20:42:06

试试这个

<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>

来源

2014-10-07 20:30:01

你改变了什么？ – tymeJV 2014-10-07 20:31:05

on input subbmit add on click atrribute and remove your document.getElementById（“Submit”）。onclick = display;代码 – 2014-10-07 20:31:41

???????工作？ – 2014-10-07 20:33:24

移动你的script后您的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>

演示：http://jsfiddle.net/zvm0zst4/

来源

2014-10-07 20:30:36 tymeJV

你只需要获得的输入值。 Jsfiddle和下面的代码; http://jsfiddle.net/zvdwkL6o/

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); 

});

来源

2014-10-07 20:36:59 Beckafly

的最主要的原因，你的代码不工作是因为浏览器处理HTML文档中的标签的顺序。

就你而言，浏览器首先执行javascript代码，然后呈现HTML表单及其输入。因此，如果您查看Chrome开发者控制台，则会看到您有错误：Uncaught TypeError: Cannot set property 'onclick' of null (line 19)。由于对document.getElementById('Submit')的调用返回null，所以引发错误。

为了解决您的问题，您可以将脚本标签下方的HTML代码，如上述建议，或者你可以在窗口后onclick处理程序绑定或身体加载：

window.onload = function() { document.getElementById("Submit").onclick = display; }

PS 。正如juvian上面提到的，您应该将函数本身分配给onclick处理函数，而不是函数返回的值，就像您在初始示例（display而不是display()）中那样。

来源

2014-10-07 20:47:44 Corina

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

回答

相关问题