3

我正在使用 div 标签制作一个盒子。用户输入将从提示框中获取，并将显示在固定尺寸的 div 标签中。如果没有给出任何输入，则根本不会显示 div。

但是，当我没有在提示框中输入任何内容时，仍会显示空 div，即使我已指定将else其可见性设置为隐藏的条件。

我认为程序没有进入将 div 的可见性设置为隐藏else的语句的条件。if

JavaScript：

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  css//the js file..
        var person1;

        function getdata()
    {
         person1=prompt("Please enter your data 1","Sample 1",max="5");
             }

         function displayResult()
         {


         var table1=document.getElementById("table1");
         table1.innerHTML=person1;
         if(person1.value!="")
            {
              $("#table1").css({"border-color": "#000000", 
                                "border-width":"1px", 
                                "border-style":"solid",
                    "visibility" : "visible",
                    //"position" :"fixed",
                    //"resize":"both",
                    "overflow":"auto",
                    "width":"60px",
                    //"maxlength":"10",
                    "height": "80px",
                            "top": "30px",
                            "left" : "80px"});
           }
           else
           {
             alert("hello");
             ("#table1").css({"border-color": "#000000", 
                              "border-width":"0px", 
                              "border-style":"solid",
                  "visibility" : 'hidden',
                 //"position" :"fixed",
                  "resize":"both",
                   "overflow":"auto",
                   "width" :"60px",
                   "height" : "80px",
                   "top": "30px",
                           "left" : "80px"});
              }

            }

HTML：

           <body>
             <form>
               <div id="table1" width="1%" height="10%" style="visibility:hidden"></div>
             </form>

             <button type="button" id="button" onclick="getdata()">Insert data</button>
           </body>

这是jsfiddle

4

3 回答 3

1

这是对正确处理空输入的代码的修改。您为“不可见” div 指定了宽度和高度，因此在这种情况下存在“不可见空间”。根据需要修改 CSS 定义。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="PATH-TO-jQuery"></script>
<script type="text/javascript">
    $(function() {
    $("#table1").css({"visibility":"hidden", "width":"1%", "heigth":"10%"});
    $("#testButton").click(function() {
        displayResult();
    });
    });
    var person1;
    function getdata()
    {
    person1=prompt("Please enter your data 1","Sample 1",max="5");
    }
    function displayResult()
    {
    $("#table1").text(person1);
    if(person1.length)
    {
        $("#table1").css({"border-color": "#000000",
        "border-width":"1px",
        "border-style":"solid",
        "visibility" : "visible",
        //"position" :"fixed",
        //"resize":"both",
        "overflow":"auto",
        "width":"60px",
        //"maxlength":"10",
        "height": "80px"//,
//          "top": top1, // undefined
//          "left" : left1 // undefined
        });
    }
    else
    {
        alert("hello");
        ("#table1").css({"border-color": "#000000",
        "border-width":"0px",
        "border-style":"solid",
        "visibility" : 'hidden',
        //"position" :"fixed",
        "resize":"both",
        "overflow":"auto",
        "width" :"60px",
        "height" : "80px",
        "top": "30px",
        "left" : "80px"});
    }

        }
</script>
<style type="text/css">

</style>
</head>
<body>
<button id="testButton">displayResult</button>
<form>
        <div id="table1"></div>
</form>
<button type="button" id="button" onclick="getdata()">Insert data</button>
</body>
</html>
于 2013-04-27T08:59:40.253 回答
0

您需要的测试是：

(person1 != null && person1 != "")

如果用户点击提示框中的取消按钮，则 person1 将为空，否则为字符串。

在 person1 为 null 的情况下，尝试访问 person1.value 将给出运行时错误

如果 person1 是字符串 person1.value 将始终为 null，因为它没有这样的属性。在这种情况下：

(person1.value != "")

相当于：

(null != "")

这总是正确的。

于 2013-04-27T10:00:17.680 回答
0

只需替换这个：

if(person1.value!="")

有了这个：

if(person1 != "")

然后再试一次...

于 2013-04-27T08:27:33.657 回答