无法检索用户输入

Cannot Retrieve User Input

本文关键字：输入 用户 检索      更新时间：2023-09-26

所以基本上我正在尝试创建一个更具交互性的日期选择器。我首先允许用户输入他们的名字来做到这一点。一旦他们点击提交，它现在应该说...您好"用户名"。

但是由于某种原因，我使用的 if else 语句将不起作用。我已经查看了我的代码，它似乎是正确的，但用户输入不会打印出来。它还应该检查输入是否是字符串，它将继续。如果它不是字符串，比如数字，它会输出到屏幕上......"你必须告诉我们你的名字才能继续前进！"如何在用户输入的任何内容上使用 if else 语句？有人可以查看我的代码并帮助我吗？我环顾四周，一无所获。也许这是一个重复的，或者我完全错误地这样做了，我只是不确定。谢谢你的帮助。使它更好的建议也将不胜感激！:)

该网页：

<!DOCTYPE html>
<html>
<head>
    <title>Going On Vacation!</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <h1>Heading Somewhere?</h1>
    <div id="main">
    <h2>What is your name?</h2>
        <input id="name" type= "text" placeholder="  Tell us!">
        <button id ="submit">Submit!</button>
    </div>
        <p id="user"></p>
        <p id="when"></p>
        <input id="date" placeholder="Choose your departure!">
        <p id="error1"></p>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

JAVASCRIPT：

$('#date').hide();
function userName(){
var user_name = $('#name').val();
$('#submit').click(function(){
 if(typeof user_name === 'string'){
     $('#main').hide('slow');
         document.getElementById("user").innerHTML = "Hello " + user_name + "!";
         $('#user').css("margin-left", "641px");
         $('#when').css("margin-left", "598px");
         document.getElementById("when").innerHTML = "When are you leaving?";
         $('#date').show();
         $('#date').datepicker();
     } else {
         document.getElementById("error1").innerHTML = "You must tell us your name to move on!"; 
     }
   });
 };

$(document).ready(userName);

它不起作用，因为您在用户填写用户名字段之前正在读取它！

var user_name = $('#name').val();

该行需要在提交方法中。

其次，检查类型没有意义。您要检查长度。

$('#submit').click(function(){
    var user_name = $.trim($('#name').val());
    if(user_name.length>0){
user_name不在

范围之内。只需将用户声明 var 移动到提交事件内部：

function userName(){
    $('#submit').click(function(){
      var user_name = $('#name').val();
     if(typeof user_name === 'string'){
         $('#main').hide('slow');
             document.getElementById("user").innerHTML = "Hello " + user_name + "!";
             $('#user').css("margin-left", "641px");
             $('#when').css("margin-left", "598px");
             document.getElementById("when").innerHTML = "When are you leaving?";
             $('#date').show();
             $('#date').datepicker();
         } else {
             document.getElementById("error1").innerHTML = "You must tell us your name to move   on!"; 
        }
      });
    };

如果你不想jQuery在每次用户点击提交时在DOM中查找对象。可以在范围之外找到对象，但必须在提交事件中检索值。例：

...
 var userObj = $('#name');
 $('#submit').click(function(){
          var user_name = userObj.val();
 ...
相关文章：