3

divタグを使ってボックスを作っています。ユーザー入力はプロンプト ボックスから取得され、固定サイズの div タグに表示されます。入力が与えられていない場合、div はまったく表示されません。

elseただし、プロンプト ボックスに何も入力しないと、可視性が非表示に設定されている条件を指定したにもかかわらず、空の div が表示されたままになります。

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 は null になり、それ以外の場合は文字列になります。

person1 が null の場合、 person1.value にアクセスしようとすると実行時エラーが発生します

person1 が文字列の場合、person1.value はそのようなプロパティを持たないため、常に null になります。その場合：

(person1.value != "")

次と同等です。

(null != "")

これは常に真実です。

于 2013-04-27T10:00:17.680 に答える