根据数组索引重新渲染“副本”按钮

编程问答 2022-08-15

问题描述

我有一个带有14个按钮的应用程序。当您单击任何按钮时，这将创建另一个具有相同内部文本的按钮。

所有预先存在的按钮都有一个数字类，可以帮助我遍历它们。我试图做到这一点，以便当单击两个或多个这些按钮时，它以从左到右的升序排列新的“副本”按钮。

就目前而言，我的代码正确地排列了前两个“副本”按钮的顺序，但是当您总共单击三个或更多预先存在的按钮时，它将忽略该顺序。

我怀疑这是因为最初渲染按钮后循环就中断了，但是我想不出办法。你能帮忙吗？

这是我认为导致问题的代码部分：

function orderButtons(array) {

for (i in array) {
let sideElements = array[i];
  if (array.length >= 2) {
   sortNumbers(array);

   /*let classArray = this.className.split(' ')
   let buttonNum = +(classArray[0]);
   let index = sideArray.indexOf(buttonNum);*/

     choiceButtons(sideButtons[sideElements].textContent);
     console.log(array);

  }
 }
}

编辑：这是代码的另一部分，可能会引起问题：

function choiceButtons(innerText) {

  //create button

if (intervalArray.indexOf(innerText) === -1) {
  let choiceBtn = document.createElement("BUTTON");
  //chooseDiv.style.visibility ="hidden";

//document.getElementById('start-button').disabled = true;  //add inner text to choice buttons
  choiceBtn.textContent = innerText;

  //append to choice-buttons-div
  document.getElementById("choice-buttons-div").appendChild(choiceBtn);
  choiceBtn.className = "choice-buttons";
      //push innerText to array
    intervalArray.push(innerText);
      console.log(intervalArray);
      let childNodes = chooseDiv.childNodes;
      console.log(intervalArray);

    }
  }

这是笔：https://codepen.io/david-webb/pen/abNmbVm?editors=1010

我添加了清除功能以暂时删除按钮。然后，我调用orderButtons函数尝试重新渲染按钮，但这没有用。

解决方法

根据您的代码笔，似乎您总是在选择两个以上按钮时清除“副本”：

if (sideArray.length > 2) {
    document.getElementById('clear').click();
    orderButtons(sideArray);
}

此外，您的clear函数仅删除DOM节点，但从不清除intervalArray中用于生成“副本”的choiceButtons

arraysarraysarrayscreateelementdomjavascriptsorting