Я пытаюсь настроить форму с помощью метода jQuery click

Question

Я пытаюсь настроить форму с помощью метода щелчка jQuery. Для html я не хочу использовать onClick, а скорее звоню с id clickMe для отображения имени. Кажется, он не работает. Это возможно? если да, что мне не хватает?

var getName = function() 
{ 
if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") 
{ 
return ("Please enter your first name and last name."); 
} 

else {var fullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value; 
return fullName; 
} 
} 

var displayName = function() 
{ 

    $(document).ready(function(){ 
    $("#clickMe").click(function(){ 
     alert(displayName()); 
    }); 
}); //end ready 

} 

HTML

<form name="form" id="form" method="post" action=""> 

<p class="FirstName"> 
    <label for="FirstName">First Name:</label> 
    </p> 
    <p> 
    <input name="FirstName" type="text" id="FirstName" /> 

</p> 

<p class="LastName"> 
    <label for="LastName">Last Name:</label></p> 
    <p> 
    <input name="LastName" type="text" id="LastName" /> 

    </p> 


<p class="submit"> 
    <input name="submitButton" type="button" id="clickMe" value="Display Name" /> 
    </p> 
</form> 

Answer 1

ответ знакомства acdcjunior для правильного анализа того, что случилось с вашим существующим кодом. На самом деле я думаю, что ваша displayName функция избыточна здесь, и вы могли бы упростить вещи значительно обновив свой код следующим образом:

$(document).ready(function() { 

    var getName = function() { 
     if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") { 
      return ("Please enter your first name and last name."); 
     } else { 
      var fullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value; 
      return fullName; 
     } 
    } 

    $("#clickMe").click(function(){ 
     alert(getName()); 
    }); 
}); 

Answer 2

Вы видите, этот код:

$(document).ready(function(){ 
    $("#clickMe").click(function(){ 
     alert(displayName()); 
    }); 
}); 

Принимают внутрь displayName:

var displayName = function() 
{ 
... 
} 

И displayName никогда не вызывается. Таким образом, событие click() никогда не настраивается.

Либо считать, что $(document).ready() код снаружи, или поместить вызов displayName, как это:

var getName = function() 
{ 
    if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") 
    { 
     return ("Please enter your first name and last name."); 
    } 
    else { 
     var fullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value; 
     return fullName; 
    } 
} 

var displayName = function() 
{ 
    $(document).ready(function(){ 
     $("#clickMe").click(function(){ 
      alert(displayName()); 
     }); 
    }); //end ready 

} 

$(function() { displayName(); }); // <-- calling displayName here!