Question

我正在制作一个表单生成器。然后出现了问题。我有一个添加输入的按钮。此输入有一个带有设置的按钮。当我单击它时，一切都很好，但是当我添加另一个输入时，在按下按钮时，第二个输入的设置没有打开，而是第一个输入的打开。为什么？请帮助我。

function addInput() {
var code = document.querySelector('.code');
var block = document.getElementById('add-form');
var posInput = document.getElementById('pos-input');
var input = document.createElement('input');
var titleInput = document.createElement('span');
var edit = document.createElement('button');
var div = document.createElement('div');
var changeInput = document.createElement('input');
var label = document.createElement('label');
var changeTitle = document.createElement('button');
var avrBlock = document.createElement('div');
var editBlock = document.createElement('div');
input.id = "input";
input.type = "text";
titleInput.className = "title-input";
titleInput.innerHTML = "Имя";
edit.className = "edit";
div.className = "block-btn";
changeInput.id = "change-input";
changeInput.type = "text";
label.innerHTML = "Заголовок поля:";
changeTitle.id = "change-title";
changeTitle.innerHTML = "Поменять заголовок";
avrBlock.className = "avrage-block";
editBlock.className = "edit-block";
changeTitle.onclick = function() {
var codeResult = document.getElementById('input-title-name');
var titleInput = document.querySelector('.title-input');
codeResult.innerHTML = changeInput.value;
titleInput.innerHTML = changeInput.value;
}
function  increaseHeight() {
	var block = document.getElementById('add-form');
	block.style.height = "auto";
}

@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
* {
margin: 0;
padding: 0

	}
	#container {
	float: left;
	width: 40%;
}

#wrap {
	background-color: #c9c9c9;
height: 100vh;
}
#add-button-container {
	display: inline-grid;
	margin-top: 2%;
}
#add-form {
	background-color: #4C4C4C;
	width: 50%;
	height: 300px;
	border-radius: 4px;
}
#add-form-container {
	display: flow-root;
}
#add-form-block {
	display: flex;
	justify-content: center;
	margin-top: 5%;
}
#input {
  display: block;
  font-size: 1.2em;
  padding: 0.25em;
width: 88%;
  margin-bottom: 0.6em;
  border-radius: 3px;
  border: 1px solid #BABABA;
}
label {
	color: white;
	display: inline-block;
	margin-right: 2%;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 1.15em;
}
#pos-input {
margin: 5% 0 0 5%;
}
#input-textarea {
	margin-bottom: 1em;
	display: block;
}
#input-submit {
	cursor: pointer;
}
.title-input {
	font-size: 1.2em;
	color: white;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	text-align: left;
}

#result {
	display: flex;

justify-content: center;
}
.block-btn {
	display: ruby;
}
.edit::after {
	  content:"\f14b";
   font-family: "FontAwesome";
   font-size: 2em;
   color: white;
}
.edit {
	   background: none;
margin-left: 2%;
border: none;
cursor: pointer;
}
#change-input {
margin-right: 2%;
padding: 0.25em;
margin-bottom: 0.6em;
border-radius: 3px;
border: 1px solid #BABABA;
width: 30%;
}
#change-title {
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
border-radius:4px;
padding-left:5px;
padding-right:5px;
padding-top:3px;
padding-bottom:3px;
color:#ffffff;
background-color:#cc6666;
outline:none;
border:none;
cursor:pointer;
display:inline-block;
}

#change-title:hover {
color:#ffffff;
background-color:#d41e1e;
} 
.edit-block {
	display: none;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Генераторы CSS | Rapprogtrain</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/>
<meta name="description" content="rapprogtrain-это сайт по изучению программирования">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
 <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">  
  <script src="app.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section>
<div id="container">
<div id="wrap">
	<div class="title">
		<span>Добавить поле</span>
	</div>
	<div id="add-button-container">
<button id="add-input" onclick=" addInput(); increaseHeight();">Добавить input</button>
</div>
	 <div class="codes-wrapper">
    <div id="title-res-block2">
      <h3 class="third">CSS Код</h3>
    <button class="clipboard" data-clipboard-target="#codes">Копировать код</button></div>
    <div class="codes" id="codes">
      <p class="line1">&lt;div id='add-form'&gt;</p>
      <p class="line2">&lt;div id='pos-input'&gt;</p>
      <p class="code"></p>
    </div>
  </div>
</div> 
</div>

<div id="add-form-container">
<div id="add-form-block">
<div id="add-form">
	<div id="pos-input">
	</div>
	</div>

	</div>
</div>
	</section>
</body>
</html>

Answer 1

首先，您包括未使用jQuery abd的人。然后，除非您的代码有点混乱，这就是为什么我还没有发现问题。我认为是因为使用ID而不是类。由于DOM从上到下开始，因此第一个ID匹配）。 changeTitle.onclick = function（）检查一下。而且不要忘记。 ID是唯一的！

通过单击打开菜单

1 个答案: