Question

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

正如您在单击“Añadirtecla”按钮时所看到的，文本框中的文本和所选选项“Shift”将返回默认选项“Flechas de movimiento”。

为什么会发生这种情况，我该如何避免呢？

我的代码是下一个：

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代码：

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

正如你所看到的，当我点击“Añadirtecla”时，我调用addControl函数并将parentNode作为唯一参数（稍后将用于将子项追加到其中）。

所以，我不知道问题出在哪里，我认为一切都是正确的，但它需要一些东西来避免价值被清除。

编辑：我分享的代码没有问题，但我的完整代码在这里：

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>

Answer 1

问题是您要覆盖HTML代码

element.innerHTML += newHTML;

这消除了当前元素的状态，包括事件监听器，输入值，检查等。

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

element.insertAdjacentHTML('beforeend', newHTML);

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么在我追加孩子时我的输入值会被清除？

1 个答案: