Question

尝试使用此JSON / HTML生成器，一旦用户将所有相应数据输入到输入字段中，它将为用户显示JSON数据和关联的HTML元素。我知道问题是什么，但我无法弄清楚如何解决它。当我尝试生成JSON时，第一组level_2_objName中的值存储然后移动到下一组level_2_objName，因为该特定输入的ID名称重置为level_2_objName + j。你可以在这里看到控制台输出=＆gt; 有什么想法吗？我知道修复需要在parseData()

内部的for循环中发生

＆＃13;

var categoryAmount 		= document.getElementById('category_amount');
var generateBtn 		= document.getElementById('generate_btn');
var parseBtn 			= document.getElementById('parse_btn');
var generatedInputs 	= document.getElementById('generated_inputs');
var generatedJson 		= document.getElementById('generated_json');
var parsedContainer 	= document.getElementById('container_parsed-html');
var totalCategoryAmount = parseInt(categoryAmount.value);

// create arrays and objects that will hold the JSON data
var AllLevelsArray = [];
var level_1_name_array = [];

function createInputs() {
	var listContainer = document.createElement('div');
	listContainer.className = 'list_container';

	var level_1_label = document.createElement('h3');
	level_1_label.textContent = 'Name of level-1 category #' + (i + 1);

	var level_1_name = document.createElement('input');
	level_1_name.className = 'form-control ' + 'level_1-name' + [i] + ' level_1';
	level_1_name.setAttribute('placeholder', 'Level-1 name');

	var level_2_list_label = document.createElement('h3');
	level_2_list_label.textContent = 'How many level 2 categories for #' + (i + 1);

	var level_2_list_amount = document.createElement('input');
	level_2_list_amount.className = 'form-control ' + 'level_2_list_amount' + [i] + ' level_2';
	level_2_list_amount.setAttribute('placeholder', 'How many level 2 categories?');
	level_2_list_amount.setAttribute('id', 'level_2_list_amount' + [i])

	var level_2_gen_btn = document.createElement('button');
	level_2_gen_btn.className = 'btn btn-default level_2-btn';
	level_2_gen_btn.textContent = 'Generate level 2';

	listContainer.appendChild(level_1_label);
	listContainer.appendChild(level_1_name);
	listContainer.appendChild(level_2_list_label);
	listContainer.appendChild(level_2_list_amount);
	listContainer.appendChild(level_2_gen_btn);
	generatedInputs.appendChild(listContainer);

	level_1_name_array.push(level_1_name);

	level_2_gen_btn.addEventListener('click', function() {

		for(i = 0; i < level_2_list_amount.value; i++) {
			var level_2_label = document.createElement('h4');
			level_2_label.textContent = 'Info for level 2 category #' + (i + 1);

			var level_2_name = document.createElement('input');
			level_2_name.className = 'form-control';
			level_2_name.setAttribute('id', 'level_2_name' + [i]);
			level_2_name.setAttribute('placeholder', 'level 2 name');

			var level_2_url = document.createElement('input');
			level_2_url.className = 'form-control';
			level_2_url.setAttribute('id', 'level_2_url' + [i]);
			level_2_url.setAttribute('placeholder', 'level 2 url');

			// save for after we finish storing data for level 2
			// var level_3 = document.createElement('input');
			
			listContainer.appendChild(level_2_label);
			listContainer.appendChild(level_2_name);
			listContainer.appendChild(level_2_url);
		}
		// this is for each individual level 2 generator button
		this.setAttribute('disabled', 'true');
	}, false)
}

function appendInputs() {
	totalCategoryAmount = parseInt(categoryAmount.value)
	console.log(totalCategoryAmount);

	generateBtn.setAttribute('disabled', 'true');

	for(i = 0; i < totalCategoryAmount; i++) {
		createInputs();
	}
}

function parseData() {
	for(var i = 0; i < totalCategoryAmount; i++) {
		var level_1_object = {};
		var level_2_list = [];
		
		var level_2_list_amount = document.getElementById('level_2_list_amount' + i);
		console.log(level_2_list_amount.value);

		level_1_object['level-1'] = level_1_name_array[i].value;

		for(var j = 0; j < level_2_list_amount.value; j++) {
			var level_2_objects = {};
			var level_2_objName = document.getElementById('level_2_name' + j);
			console.log(level_2_objName);
			console.log(level_2_objName.value);
			
			level_2_objects['L2-name'] = level_2_objName.value;
			level_2_list.push(level_2_objects);
			level_1_object['level-2-list'] = level_2_list;
		}

		AllLevelsArray.push(level_1_object);
	}
	console.log(AllLevelsArray);
	
	generated_json.textContent = JSON.stringify(AllLevelsArray, null, 4);
}

generateBtn.addEventListener('click', appendInputs, false);
parseBtn.addEventListener('click', parseData, false);

＆＃13;

<div class="container header">
		<div class="row">
			<div class="col-xs-12">
				<img class="logo" src="img/nav-logo.png">
				<h1>Nav Generator</h1>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-6">
				<h2>How it works</h2>
				<ol>
					<li>Enter the number of level-1 categories you will need</li>
					<li>Enter the number of respective you will need for level-2 and/or level-3 categories</li>
				</ol>
			</div>
			<div class="row">
				<div class="col-xs-6 generate_container">
					<form class="form-group">
						<label>How many Level-1 Categories do you need?</label>
						<input type="text" class="form-control" id="category_amount" placeholder="Category Amount">
						<button type="button" class="btn btn-default" id="generate_btn">Generate</button>
						<button type="button" class="btn btn-primary" id="parse_btn">Parse HTML</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-7" id="generated_inputs">

			</div>
			<div class="col-xs-5" id="generated_json">

			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12" id="container_parsed-html">

			</div>
		</div>
	</div>

＆＃13;

Answer 1

问题是选择2级输入字段。您可以通过ID var level_2_objName = document.getElementById('level_2_name' + j);

选择它们

j从零开始，每个级别为1。 id必须在整个文档中是唯一的。如果您创建两个具有相同ID的元素，则会冒犯html标准。所有常见的浏览器都接受它，但是如果你选择一个id，它每次都会返回带有这个id的第一个元素。

<强>解决方案您不需要问题的ID。使用css类或名称attribut。一个css类可以在文档中多次使用，你可以在它的css类中选择每个元素。与name属性相同。 name属性提供了使用数组表示法的可能性：nameOfElement[]。因此，您不需要连续编号您的ID（这绝不是一个好主意并且编码风格很差。如果您需要对您的ID进行编号，那么大多数情况下它指的是设计问题。）

覆盖数组中的值

1 个答案: