Question

是javascript和我的学生项目的新手。我创建了一个示例页面，用户可以在其中输入地点的名称..

他最多可以输入4个地方..我只想要一个＆＃34;文字A＆＃34;当用户进入第一名并且点击“＃34;添加另一个地方＆＃34;然后＆＃34;放置B＆＃34;需要显示以输入文本和＃34;放置C＆＃34;和＆＃34;放置D＆＃34;。

这是我的代码

＆＃13;

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";

    }
  }
}

＆＃13;

<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;" />

＆＃13;

让我知道如何做到这一点..

Answer 1

你需要添加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');
    }
});

}）;

我已经给了li你只需将它改为按钮就可以了

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

Answer 2

那样的东西???

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

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

Answer 3

HTML代码中存在大量语法错误，除此之外，解决问题的方法非常简单。我编写了以下脚本来获取所需的功能

concertartist

以下是我的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>

使用Javascript显示名称

3 个答案: