顯示使用Javascript

Question

是新來的JavaScript的名稱，做我的學生項目。我創建了一個示例頁面，用戶輸入一個地名..

他可以輸入最多4個地方。我只是想有「放一個」的頂部文本時，用戶在進入1號當他點擊「添加另一個地方」時，則需要顯示「地點B」以輸入文字，並且與「地點C」和「地點D」相同。

這裏是我的代碼

var i = 0; 
 

 
function isNumericKey(e) { 
 

 
    if (window.event) { 
 
    var charCode = window.event.keyCode; 
 
    } else if (e) { 
 
    var charCode = e.which; 
 
    } else { 
 
    return true; 
 
    } 
 

 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
 
    return false; 
 
    } 
 

 
    return true; 
 

 
} 
 

 
function add() { 
 

 
    var a = document.getElementById("ad").value; 
 

 
    // alert('Please Enter Details'); 
 

 
    if (a != 'null' || a != '') { 
 
    i++; 
 

 
    if (i == 1) { 
 

 
     //document.getElementById("input").reset(); 
 

 
     document.getElementById("Place1").style.display = "none"; 
 

 
     document.getElementById("Place2").style.display = "block"; 
 

 
     document.getElementById("Place2").required = true; 
 

 
     document.getElementById("Place3").style.display = "none"; 
 

 
     document.getElementById("Place4").style.display = "none"; 
 

 

 
    } else if (i == 2) { 
 

 
     //document.getElementById("input").reset(); 
 

 
     document.getElementById("Place1").style.display = "none"; 
 

 
     document.getElementById("Place2").style.display = "none"; 
 

 
     document.getElementById("Place3").style.display = "block"; 
 

 
     document.getElementById("Place3").required = true; 
 

 
     document.getElementById("Place4").style.display = "none"; 
 

 
    } else if (i == 3) { 
 

 
     //document.getElementById("input").reset(); 
 

 
     document.getElementById("Place1").style.display = "none"; 
 

 
     document.getElementById("Place2").style.display = "none"; 
 

 
     document.getElementById("Place3").style.display = "none"; 
 

 
     document.getElementById("Place4").style.display = "block"; 
 

 
     document.getElementById("Place4").required = true; 
 

 

 
     document.getElementById("ad").style.display = "none"; 
 

 
    } 
 
    } 
 
}

<form action="abc.php" method="post"> 
 

 
    <table width="600" ;> 
 
    <tr> 
 

 
     <td><font size=4px><label>Place</label></font> 
 
     <br> 
 
     <br> 
 
     </td> 
 

 
     <td> 
 
     <input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" required="true" /> 
 
     <br> 
 
     </td> 
 

 
     <td> 
 
     <input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" /> 
 
     <br> 
 
     </td> 
 

 
     <td> 
 
     <input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" /> 
 
     <br> 
 
     </td> 
 

 
     <td> 
 
     <input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" /> 
 
     <br> 
 
     </td> 
 

 
    </tr> 
 

 
    <td> 
 
     <input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" style="display: block; 
 
height: 25px; 
 
width: 175px; 
 
border-radius: 25px; 
 
background-color: #008CBA; 
 
color: #fff; 
 
border: #008CBA; 
 
cursor: pointer;" />

讓我知道該怎麼做..

Answer 1

有很多語法錯誤的HTML代碼，反正身邊，解決你的問題很簡單。我寫了下面的腳本來獲取所需的

<script type="text/javascript"> 
    var i = 1; 
    function add() { 

     if (i == 1) 
     { 
      document.getElementById("Place1").style.display = "none"; 
      document.getElementById("Place2").style.display = "block"; 

      i++; 
     } 
     else if(i==2) 
     { 
      document.getElementById("Place2").style.display = "none"; 
      document.getElementById("Place3").style.display = "block"; 
      i++; 
     } 
     else if (i == 3) { 
      document.getElementById("Place3").style.display = "none"; 
      document.getElementById("Place4").style.display = "block"; 
      document.getElementById("ad").style.display = "none"; 
     } 
    } 
</script> 

和下方的功能是我的HTML代碼

<table> 
<tr> 
    <td><label>Place</label></td> 
    <td><input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20px;height:30px;font-size:14pt;" placeholder="place1"/></td> 
    <td><input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place2" /></td> 
    <td><input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place3" /></td> 
    <td><input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place4" /></td> 
</tr> 
<tr> 
    <td><input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" /></td> 
</tr> 

Answer 2

你需要添加jQuery庫

<ol></ol> 
<button id="btn2">Append list item</button> 

嘗試。 。

$（文件）。就緒（函數（）{

$("#btn2").click(function(){ 
    var count_cls = $('.munna').length; 

    if(count_cls<4) 
    { 
    $("ol").append("<li class='munna'>Place "+count_cls+"</li>"); 

    }else 
    { 
     alert('max reached'); 
    } 
}); 

}）;

我已經給了李友只是將其更改爲任何你想要的

chttK按鈕：http://jsfiddle.net/6yLpw9jv/2/

Answer 3

類似的東西???

\t var MAX_PLACES = 4; 
 
\t var currentEditPlace = 0; 
 
\t 
 
\t function editPlace(index) 
 
\t { 
 
\t \t var places = document.getElementById('places'); 
 
\t \t var place = places.getElementsByTagName("li")[index]; 
 
\t \t place.style.display = 'block'; 
 
\t \t 
 
\t \t var span = place.getElementsByTagName("span")[0]; 
 
\t \t var input = document.createElement('input'); 
 
\t \t input.setAttribute("type", "text"); 
 
\t \t input.setAttribute("value", ""); 
 
\t \t span.appendChild(input) 
 
\t \t 
 
\t \t /** Return key => show next place */ 
 
\t \t input.onkeydown = function(e) { 
 
\t \t \t 
 
\t \t \t /** Validation */ 
 
\t \t \t if (this.value != "" && e.keyCode == 13) { 
 
\t \t \t \t addNewPlace(); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t /** Auto focus new input */ 
 
\t \t input.focus(); 
 
\t } 
 

 
    function addNewPlace() { 
 
\t \t if (currentEditPlace+1 < MAX_PLACES) { 
 
\t \t \t currentEditPlace++; 
 
\t \t \t editPlace(currentEditPlace); 
 
\t \t } 
 
    } 
 
\t 
 
\t /** Start editing place A */ 
 
\t editPlace(currentEditPlace);

<ul id="places"> 
 
\t <li style="display:none;">Place A: <span></span></li> 
 
\t <li style="display:none;">Place B: <span></span></li> 
 
\t <li style="display:none;">Place C: <span></span></li> 
 
\t <li style="display:none;">Place D: <span></span></li> 
 
</ul> 
 
<input type="button" value="Add new place" onclick="addNewPlace()"/>