當沒有輸入時會隱藏div div

我使用div標籤製作盒子。用戶輸入將從提示框中獲取，並將顯示在固定尺寸的div標籤中。如果沒有輸入，那麼div就不會顯示。當沒有輸入時會隱藏div div

但是，當我沒有在提示框中輸入任何內容時，即使我已指定else條件下其可見性設置爲隱藏，仍會顯示空的div。

我認爲該程序未輸入if語句的else條件，以將div的可見性設置爲隱藏。

的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

來源

2013-04-27 Lucy

只需更換這一點：

if(person1.value!="")

有了這個：

if(person1 != "")

，然後再試一次......

來源

2013-04-27 08:27:33

試過...當我輸入一些數據，然後框沒有得到顯示，當沒有數據輸入時，我得到錯誤「＃table1」.css不是沒有輸出功能... – Lucy 2013-04-27 08:41:21

什麼時候調用displayResult（）函數？ – 2013-04-27 08:45:18

當用戶點擊按鈕或單選按鈕時。 – Lucy 2013-04-27 09:24:45

這是你的代碼能夠正確處理空輸入的修改。您指定了「不可見」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-27 08:59:40

試過這個程序......它在工作，當我把一些數據..當我離開提示框爲空時，即使沒有任何打印我沒有得到兩個按鈕（指定不可見的div框）之間的空白空間以及錯誤「＃table1」.css不是一個函數... – Lucy 2013-04-27 09:28:59

您所需要的測試是：

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

如果用戶點擊提示框中的取消按鈕，然後PERSON1將是無效的，否則它是一個字符串。

在當PERSON1爲null，則試圖訪問person1.value會給出一個運行時錯誤

的情況下，當PERSON1是一個字符串person1.value將永遠是零，因爲它有沒有這樣的財產的情況下

。在這種情況下：

(person1.value != "")

等同於：

(null != "")

這是總是如此。

來源

2013-04-27 10:00:17

當沒有輸入時會隱藏div div

回答

相關問題