当我追加一个孩子时，为什么我的输入值会被清除？ [英] Why my input's value get cleared when I append a child?

问题描述

当我在 div 内追加一个元素时遇到问题，并且我的输入中的所有值（包括所选选项）都被清除，如下所示：

正如你所看到的，当我点击按钮Añadir tecla中，文本框中的文本和选定的选项Shift会返回到默认选项Flechas de movimiento。

为什么会发生这种情况，我怎么能避免它？

我的代码是下一个：

  var控件= [{value：flechas，text：Flechas de movimiento}，{value：letras，text：Letras（WASD）}，{value：enter，text：Enter}，{ value：control，text：Ctrl}，{value：alt，text：Alt}，{value：espacio，text：Espacio}，{value：der 点击derecho}，{value：izq，text：Click izquierdo}，{value：mover，text：Move r elratón}，{value：shift，text：Shift}，{value：customkey，text：Especificar tecla}]; 
 
 function addControl（e）
 {
 e.appendChild（getControlSelect（））; 
} 
 
函数getControlSelect（）
 {
 var select = document.createElement（'select'），
选项，
i = 0 ，
 il = controls.length，
 html = document.createElement（'div'），
 text = document.createElement（'input'），
 delbtn = document.createElement （ '输入'）; 
 
 text.type =text; 
 
 delbtn.type =button; 
 delbtn.value = - ; $; 
 $ b $ for（（i; ++ i）
 {
 option = document.createElement（'option'）; 
 option.setAttribute（'value'，controls [i] .value）; 
 option.appendChild（document.createTextNode（controls [i] .text））; 
 select.appendChild（option）; 
} 
 html.innerHTML + =< b> Tecla< / b>< br>; 
 html.appendChild（select）; 
 html.innerHTML + =< br>< b>Acción< / b>< br>; 
 html.appendChild（text）; 
 html.appendChild（delbtn）; 
 
返回html; 
} 
  

HTML代码：

 < DIV> 
< input type =buttonvalue =Añadirteclaonclick =addControl（this.parentNode）/> 
< / div> 
  

正如您所看到的，当我点击Añadirtecla时，我将addControl函数与parentNode调用为唯一参数（这将用于后面追加它的孩子）。

所以，我不知道问题在哪里，我认为一切正确，但它需要

编辑：我分享的代码没有问题，但我的完整代码在这里： div class =snippet-code>

var controls = [{value：flechas，text：Flechas de movimiento }，{value：letras，text：Letras（WASD）}，{value：enter，text：Enter}，{value：control，text：Ctrl}，{value ：alt，文本：Alt}，{value：espacio，文本：Espacio}，{value：der，文本：点击derecho}，{value：izq 点击izquierdo}，{value：mover，文本：Mover elratón}，{value：shift，text：Shift}，{value：customkey，text：Especificar tecla}]，skippedIndexes = []，sep =< div class ='sep'id ='firstsep'style ='width：200px;'>< / div>，oldIndex = 0; //，// sInd = 0; function addControl（e）{if（e.lastChild .className！=sep）e.innerHTML + = sep; e.appendChild（getControlSelect（））; e.innerHTML + = sep.replace（id ='firstsep'，）;} function onSelectChange（e）{//修改数组//a = e.associatedInput //console.log（e.dataset。一世）; / * var newIndex; newIndex = e.selectedIndex; if（skippedIndexes.length> 0&& skippedIndexes.indexOf（oldIndex）> -1）skippedIndexes.splice（skippedIndexes.indexOf（oldIndex），1）; //删除oldIndex if（skippedIndexes.length> 0&&& skippedIndexes.indexOf（newIndex）== -1）skippedIndexes.push（newIndex）; （）函数getControlSelect（）{var select = document.createElement（'select'），option，i = 0，il = controls.length，html = document.createElement（'div'），text = document.createElement（'input'），delbtn = document.createElement （'input'），ascinpt = document.createElement（'input'），html1 = document.createElement（'div'）; html1.style.display =inline-block; text.type =text; text.name =accion []; text.style.width =158px; delbtn.type =button; （）; e.remove（）; deleteFirstSep（）;'）; delbtn.value = - ; delbtn.style.padding =0 5px; delbtn.style.marginLeft =5px; delbtn.style.position =亲爱的; delbtn.style.top =-20px; delbtn.style.left =2px; ascinpt.name =tecla []; ascinpt.type =隐藏; select.id =htmlkey; select.dataset.associatedInput = ascinpt; //select.dataset.i = sInd; // SIND ++; select.setAttribute（onchange，onSelectChange（this））; for（; i

.sep {border-top：4px虚线＃A4A4A4; margin：15px 0 15px 0;}

< div> < input type =buttonvalue =Añadirteclaonclick =addControl（this.parentNode）/>< / div>

解决方案 问题是您覆盖HTML代码

  element.innerHTML + = newHTML; 
  

这样可以摆脱当前元素的状态，包括事件侦听器，输入值，检查等等。

相反，您应该使用 appendChild 或 insertAdjacentHTML ：

  element.insertAdjacentHTML（'beforeend'，newHTML）; 
  

var controls = [{value：flechas ，文本：Flechas de movimiento}，{value：letras，文本：Letras（WASD）}，{value：enter，text：Enter}，{value：control Ctrl}，{value：alt，text：Alt}，{value：espacio，文本：Espacio}，{value：der，文本：点击derecho}，{value ：izq，文本：Click izquierdo}，{value：mover，text：Mover elratón}，{value：shift，text：Shift}，{value：customkey， text：Especificar tecla}]，skippedIndexes = []，sep =< div class ='sep'id ='firstsep'style ='width：200px;'>< / div>，oldIndex = 0 ; //，// sInd = 0; function addControl（e）{if（e.lastChild.className！=sep）e.innerHTML + = sep; e.appendChild（getControlSelect（））; e.insertAdjacentHTML（'beforeend'，sep.replace（id ='firstsep'，））;}函数onSelectChange（e）{}函数deleteFirstSep（）{if（！document.getElementById（firstsep）。 nextSibling）document.getElementById（firstsep）。remove（）;} getControlSelect（）{var select = document.createElement（'select'），option，i = 0，il = controls.length，html = document.createElement （'div'），text = document.createElement（'input'），delbtn = document.createElement（'input'），ascinpt = document.createElement（'input'），html1 = document.createElement（'div'）; html1.style.display =inline-block; text.type =text; text.name =accion []; text.style.width =158px; delbtn.type =button; （）; e.remove（）; deleteFirstSep（）;'）; delbtn.value = - ; delbtn.style.padding =0 5px; delbtn.style.marginLeft =5px; delbtn.style.position =亲爱的; delbtn.style.top =-20px; delbtn.style.left =2px; ascinpt.name =tecla []; ascinpt.type =隐藏; select.id =htmlkey; select.dataset.associatedInput = ascinpt; //select.dataset.i = sInd; // SIND ++; select.setAttribute（onchange，onSelectChange（this））; for（; i

.sep {border-top：4px虚线＃A4A4A4; margin：15px 0 15px 0;}

< div> < input type =buttonvalue =Añadirteclaonclick =addControl（this.parentNode）/>< / div>

I'm having trouble when I append an element inside a div and is that all the values from my inputs (including selected options) get cleared as is shown here:

As you can see when I click the button "Añadir tecla", the text from the textbox and the selected option "Shift" goes back to default option that is "Flechas de movimiento".

Why this happens and how can I avoid it?

My code is the next:

var controls = [{value: "flechas", text: "Flechas de movimiento"}, {value: "letras", text: "Letras (WASD)"}, {value: "enter", text: "Enter"}, {value: "control", text: "Ctrl"}, {value: "alt", text: "Alt"}, {value: "espacio", text: "Espacio"}, {value: "der", text: "Click derecho"}, {value: "izq", text: "Click izquierdo"}, {value: "mover", text: "Mover el ratón"}, {value: "shift", text: "Shift"}, {value: "customkey", text: "Especificar tecla"}];

function addControl(e) 
{
    e.appendChild(getControlSelect());
}

function getControlSelect() 
{
    var select = document.createElement('select'),
        option,
        i = 0,
        il = controls.length,
        html = document.createElement('div'),
        text = document.createElement('input'),
        delbtn = document.createElement('input');

    text.type = "text";

    delbtn.type = "button";
    delbtn.value = "-";

    for (; i < il; ++i)
    {
        option = document.createElement('option');
        option.setAttribute('value', controls[i].value);
        option.appendChild(document.createTextNode(controls[i].text));
        select.appendChild(option);
    }
    html.innerHTML += "<b>Tecla</b><br>";
    html.appendChild(select);
    html.innerHTML += "<br><b>Acción</b><br>";
    html.appendChild(text);
    html.appendChild(delbtn);

    return html;
}

HTML Code:

<div>
    <input type="button" value="Añadir tecla" onclick="addControl(this.parentNode)" />
</div>

As you can see, when I click "Añadir tecla" I call addControl function with the parentNode as unique parameter (this will used later for append the child inside it).

So, I don't know where is the problem, I think everything is correct, but It need something to avoid the values get cleared.

EDIT: The code I shared hasn't problems, but my complete code has here:

var controls = [{value: "flechas", text: "Flechas de movimiento"}, {value: "letras", text: "Letras (WASD)"}, {value: "enter", text: "Enter"}, {value: "control", text: "Ctrl"}, {value: "alt", text: "Alt"}, {value: "espacio", text: "Espacio"}, {value: "der", text: "Click derecho"}, {value: "izq", text: "Click izquierdo"}, {value: "mover", text: "Mover el ratón"}, {value: "shift", text: "Shift"}, {value: "customkey", text: "Especificar tecla"}],
	skippedIndexes = [],
	sep = "<div class='sep' id='firstsep' style='width: 200px;'></div>",
	oldIndex = 0;//,
	//sInd = 0;

function addControl(e) 
{

	if(e.lastChild.className != "sep") e.innerHTML += sep;
	e.appendChild(getControlSelect());
	e.innerHTML += sep.replace(" id='firstsep'", "");
}

function onSelectChange(e) 
{
	//Modify the array
	//a = e.associatedInput

	//console.log(e.dataset.i);

	/*var newIndex;

	newIndex = e.selectedIndex;

	if(skippedIndexes.length > 0 && skippedIndexes.indexOf(oldIndex) > -1) skippedIndexes.splice(skippedIndexes.indexOf(oldIndex), 1); //Delete oldIndex

	if(skippedIndexes.length > 0 && skippedIndexes.indexOf(newIndex) == -1) skippedIndexes.push(newIndex);

	oldIndex = newIndex;*/

	//Change associated



}

function deleteFirstSep() 
{
	if(!document.getElementById("firstsep").nextSibling) document.getElementById("firstsep").remove();
}

function getControlSelect() 
{
	var select = document.createElement('select'),
	    option,
	    i = 0,
	    il = controls.length,
	    html = document.createElement('div'),
	    text = document.createElement('input'),
	    delbtn = document.createElement('input'),
	    ascinpt = document.createElement('input'),
	    html1 = document.createElement('div');

	html1.style.display = "inline-block";

	text.type = "text";
	text.name = "accion[]";
	text.style.width = "158px";

	delbtn.type = "button";
	delbtn.setAttribute('onclick', 'var e = this.parentNode;e.nextSibling.remove();e.remove();deleteFirstSep();');
	delbtn.value = "-";
	delbtn.style.padding = "0 5px";
	delbtn.style.marginLeft = "5px";
	delbtn.style.position = "relative";
	delbtn.style.top = "-20px";
	delbtn.style.left = "2px";

	ascinpt.name = "tecla[]";
	ascinpt.type = "hidden";

	select.id = "htmlkey";
	select.dataset.associatedInput = ascinpt;
	//select.dataset.i = sInd;
	//sInd++;
	select.setAttribute("onchange", "onSelectChange(this)");

	for (; i < il; ++i)
		if(skippedIndexes.indexOf(i) == -1) 
		{
		    option = document.createElement('option');
		    option.setAttribute('value', controls[i].value);
		    option.appendChild(document.createTextNode(controls[i].text));
		    select.appendChild(option);
		}
	html1.innerHTML += "<b>Tecla</b><br>";
	html1.appendChild(select);
	html1.innerHTML += "<br><b>Acción</b><br>";
	html1.appendChild(text);
	html.appendChild(html1);
	html.appendChild(delbtn);

	return html;
}

.sep {
  border-top: 4px dashed #A4A4A4;
  margin: 15px 0 15px 0;
}

<div>
    <input type="button" value="Añadir tecla" onclick="addControl(this.parentNode)" />
</div>

解决方案

The problem is that you overwrite the HTML code

element.innerHTML += newHTML;

This gets rid of the state of the current elements, including event listeners, input values, checkedness, etc.

Instead, you should use appendChild or insertAdjacentHTML:

element.insertAdjacentHTML('beforeend', newHTML);

var controls = [{value: "flechas", text: "Flechas de movimiento"}, {value: "letras", text: "Letras (WASD)"}, {value: "enter", text: "Enter"}, {value: "control", text: "Ctrl"}, {value: "alt", text: "Alt"}, {value: "espacio", text: "Espacio"}, {value: "der", text: "Click derecho"}, {value: "izq", text: "Click izquierdo"}, {value: "mover", text: "Mover el ratón"}, {value: "shift", text: "Shift"}, {value: "customkey", text: "Especificar tecla"}],
  skippedIndexes = [],
  sep = "<div class='sep' id='firstsep' style='width: 200px;'></div>",
  oldIndex = 0; //,
//sInd = 0;

function addControl(e) {

  if (e.lastChild.className != "sep") e.innerHTML += sep;
  e.appendChild(getControlSelect());
  e.insertAdjacentHTML('beforeend', sep.replace(" id='firstsep'", ""));
}

function onSelectChange(e) {}

function deleteFirstSep() {
  if (!document.getElementById("firstsep").nextSibling) document.getElementById("firstsep").remove();
}

function getControlSelect() {
  var select = document.createElement('select'),
    option,
    i = 0,
    il = controls.length,
    html = document.createElement('div'),
    text = document.createElement('input'),
    delbtn = document.createElement('input'),
    ascinpt = document.createElement('input'),
    html1 = document.createElement('div');

  html1.style.display = "inline-block";

  text.type = "text";
  text.name = "accion[]";
  text.style.width = "158px";

  delbtn.type = "button";
  delbtn.setAttribute('onclick', 'var e = this.parentNode;e.nextSibling.remove();e.remove();deleteFirstSep();');
  delbtn.value = "-";
  delbtn.style.padding = "0 5px";
  delbtn.style.marginLeft = "5px";
  delbtn.style.position = "relative";
  delbtn.style.top = "-20px";
  delbtn.style.left = "2px";

  ascinpt.name = "tecla[]";
  ascinpt.type = "hidden";

  select.id = "htmlkey";
  select.dataset.associatedInput = ascinpt;
  //select.dataset.i = sInd;
  //sInd++;
  select.setAttribute("onchange", "onSelectChange(this)");
  for (; i < il; ++i)
    if (skippedIndexes.indexOf(i) == -1) {
      option = document.createElement('option');
      option.setAttribute('value', controls[i].value);
      option.appendChild(document.createTextNode(controls[i].text));
      select.appendChild(option);
    }
  html1.insertAdjacentHTML('beforeend', "<b>Tecla</b><br>");
  html1.appendChild(select);
  html1.insertAdjacentHTML('beforeend', "<br><b>Acción</b><br>");
  html1.appendChild(text);
  html.appendChild(html1);

  html.appendChild(delbtn);
  return html;
}

.sep {
  border-top: 4px dashed #A4A4A4;
  margin: 15px 0 15px 0;
}

<div>
  <input type="button" value="Añadir tecla" onclick="addControl(this.parentNode)" />
</div>

这篇关于当我追加一个孩子时，为什么我的输入值会被清除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！