Отображение имени с использованием 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> 

попробовать это. .

$ (документ) .ready (функция() {

$("#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'); 
    } 
}); 

});

я дал для Li вы просто изменить его на кнопку, что вы хотите

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()"/>