Question

基本上我正在尝试使用文本框中的某些值填充数组。我认为我可以通过增加ids来实现它，但它不起作用。

这是：

var sections = 0;
var mod = [];
var identifier = 0;

function addSection(){

	sections++;

	document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
	document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
	document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'> <br>";
}

function removeSection(){
	if (sections > 0){
		sections--;
		identifier -= 3;
		document.getElementById("input").innerHTML = "";

		for(i=0; i<sections; i++){
			document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
			document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
			document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'> <br>";
		}

	}
}

function calculate(){
	populateArray();
}

function populateArray(){

	var i,j;
	
	for(i=0;i<sections * 3;i++){
		var pop = i.toString();
		mod[i] = parseInt(document.getElementById(pop).innerHTML.value);
		i++;

		pop = i.toString();
		mod[i] = parseInt(document.getElementById(pop).innerHTML.value);
		i++

		pop = i.toString();
		mod[i] = parseInt(document.getElementById(pop).innerHTML.value);
	}
	document.getElementById("debug").innerHTML = mod.toString();
}

<!doctype html>
<html>
<head>
	<title>To Pass v1.0</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<h1>TO PASS</h1>

<button onclick="addSection()">Add Section</button>
<button onclick="removeSection()">Remove Section</button>
<div id='input'></div>
<button onclick="calculate()">Calculate</button>
<div id='output'></div>
<div id='debug'></div>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>

是否可以按照我的方法进行，或者无论出于何种原因它都不可能无效？做一些搜索似乎jquery可能是要走的路，但我不知道如何开始这个。

Answer 1

此版本的脚本将实际元素存储在一系列节中。这样你就可以像对待数组那样遍历它们，并以这种方式改变内容。

以下是代码笔：looping through added elements

var sections = [];
var output = document.getElementById('input');

function addSection(){

    var section = document.createElement('div');

  for (var i = 0; i < 3; i++) {
    el = document.createElement('input');
    el.type = 'text';

    section.appendChild(el);
    }

  sections.push(section);
  output.appendChild(section);
}

function removeSection(){
    if (sections.length > 0){
        output.removeChild(sections.pop())
    }
}

function calculate(){
    populateArray();
}

function populateArray(){

    for (var i = 0; i < sections.length; i++) {

      for (var j = 0; j < sections[i].children.length; j++ ) {
       sections[i].children[j].value = (i+1) * (j+2); 
      }
    }
}

Answer 2

如果你的问题是NaN，这是因为你选择了一个输入字段，然后在读取它的值之前首先尝试读取它的innerHtml。直接读取输入值。

＆＃13;

var sections = 0;
var mod = [];
var identifier = 0;

function addSection(){

	sections++;

	document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
	document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
	document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'> <br>";
}

function removeSection(){
	if (sections > 0){
		sections--;
		identifier -= 3;
		document.getElementById("input").innerHTML = "";

		for(i=0; i<sections; i++){
			document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
			document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
			document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'> <br>";
		}

	}
}

function calculate(){
	populateArray();
}

function populateArray(){

	var i,j;
	
	for(i=0;i<sections * 3;i++){
		var pop = i.toString();
		mod[i] = parseInt(document.getElementById(pop).value);
		i++;

		pop = i.toString();
		mod[i] = parseInt(document.getElementById(pop).value);
		i++

		pop = i.toString();
		mod[i] = parseInt(document.getElementById(pop).value);
	}
	document.getElementById("debug").innerHTML = mod.toString();
}

＆＃13;

<!doctype html>
<html>
<head>
	<title>To Pass v1.0</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<h1>TO PASS</h1>

<button onclick="addSection()">Add Section</button>
<button onclick="removeSection()">Remove Section</button>
<div id='input'></div>
<button onclick="calculate()">Calculate</button>
<div id='output'></div>
<div id='debug'></div>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>

＆＃13;

Answer 3

jQuery肯定会简化事情，但它无法做任何JavaScript无法做到的事情，并且许多令人惊叹的网站早在jQuery出现之前就已经构建完毕。

<小时/> 在populateArray()，请在此处删除innerHTML：

mod[i] = parseInt(document.getElementById(pop).innerHTML.value);

应该是：

mod[i] = parseInt(document.getElementById(pop).value);

您可以像这样简化功能：

function populateArray() {
  var i;

  for(i = 0 ; i < sections * 3 ; i++) {
    mod[i] = parseInt(document.getElementById(i).value);
  }
  document.getElementById('debug').innerHTML = mod.toString();
}

<小时/> 在addSection()中，这会消除现有input元素的值：

document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";

相反，您应该创建新的input元素并附加它们。

这是函数的重写：

var input= document.getElementById('input');

function addSection(){
  var inp, i;

  sections++;

  for(var i = 0 ; i < 3 ; i++) {
    inp= document.createElement('input');
    inp.type= 'text';
    inp.id= identifier++;
    input.appendChild(inp);
  }
  input.appendChild(document.createElement('br'));
} //addSection

在removeSection()中，所有input元素的值都将被删除。

我没有重写该函数，而是完成了重写或程序，没有任何全局变量，也没有为input元素分配ID。

如果您有任何疑问，我会用解释更新我的答案。

<强>段

function addSection() {
  var input= document.getElementById('input'),
      sect= document.querySelector('section');
  
  input.appendChild(sect.cloneNode(true));
}

function removeSection() {
  var input= document.getElementById('input'),
      sects= document.querySelectorAll('section');
  
  if(sects.length > 1) {
    input.removeChild(sects[sects.length-1]);
  }
}

function calculate() {
  var inp= document.querySelectorAll('section input'),
      debug= document.getElementById('debug'),
      mod= [],
      i,
      val;

  for(i = 3 ; i < inp.length ; i++) {
    val= parseInt(inp[i].value);
    mod.push(val || 0);
  }
  debug.innerHTML = mod.toString();
}

section:first-of-type {
  display: none;
}

<button onclick="addSection()">Add Section</button>
<button onclick="removeSection()">Remove Section</button>

<div id='input'>
  <section>
    <input type="text">
    <input type="text">
    <input type="text">
  </section>
</div>
<button onclick="calculate()">Calculate</button>
<div id='output'></div>
<div id='debug'></div>

通过文本框循环，使用id作为变量？

3 个答案: