Javascript 如何以动态方式而不是硬编码方式覆盖变量？

我有一些类似的代码：

addBlock=document.querySelectorAll（`slide='B.slide1'].TEAM`）；
addBlock=addBlock[addBlock.length-1]；
函数addNewSimilarBlockOfCode（x）{
HTML=x.outerHTML；
//在上一个代码块之后插入新代码块：
x、 insertAdjacentHTML（'afterend'，HTML）；
//使用新添加的HTML代码重新声明x
x=x；//问题出在这里。这是一个错误的代码！
log（'x的新值为：'+x）；
}
addNewSimilarBlockOfCode（addBlock）；

正如您所看到的，问题是新的x仍然指示参数中的x的旧值。 我需要一种动态的方法来实现它，我不想硬编码，有些人可能会说“与其写x=x，不如写：

x=document.querySelectorAll（`${slide（'B.slide1'）}.TEAM`）；
x=addBlock[x.length-1]；

问题是我不想硬编码

我拥有的原始代码目前正在运行，但我想将其从硬编码函数（addField和newField函数）更改为动态代码，以便以后使用：

 const UI = (() => {
    //TOOLS:
    const $ = (x) => document.querySelector(x);
    const $$ = (x) => {
      let element = document.querySelectorAll(x);
      element = slice_array(element);
      return element;
    };
    const slice_array = (x) => {
      return Array.prototype.slice.call(x);
    };
    const slide = (path) => {
      path = path.split(".");
      return `[scope='${path[0]}'][slide='${path[1]}']`;
    };
    //-------------</TOOLS>
    const addField = (element, replace) => {
      let HTML;
      console.log("replace this: " + replace[0] + " with this: " + replace[1]);
      HTML = element.outerHTML;
      if (replace instanceof Array)
        HTML = element.outerHTML.replace(replace[0], replace[1]);
      element.insertAdjacentHTML("afterend", HTML);
    };
    return {
      addField: addField,
    };
  })();

  const controller = ((UI, model) => {
    //TOOLS:
    const $ = (x) => document.querySelector(x);
    const $$ = (x) => {
      let element = document.querySelectorAll(x);
      element = slice_array(element);
      return element;
    };
    const slice_array = (x) => {
      return Array.prototype.slice.call(x);
    };
    const slide = (path) => {
      path = path.split(".");
      return `[scope='${path[0]}'][slide='${path[1]}']`;
    };
    //-------------</TOOLS>

    let addBlock;
    addBlock = $$(`${slide("B.slide1")} .TEAM`);
    const eventList = () => {
      addBlock[addBlock.length - 1].addEventListener("input", newField);
    };
    let newField = () => {
      let replaceThis, withThis;
      addBlock = $$(`${slide("B.slide1")} .TEAM`);
      replaceThis = `<span id="TEAM_NUMBER_${counter}">${counter}</span>`;
      withThis = `<span id="TEAM_NUMBER_${counter + 1}">${counter + 1}</span>`;
      replace = [replaceThis, withThis];
      addField(addBlock, replace);
    };
    let counter = 1;
    const addField = (addBlock, replace) => {
      e = window.event;
      const target = e.target || e.srcElement;
      //remove previous event listener
      addBlock[addBlock.length - 1].removeEventListener("input", newField);
      console.log(addBlock);
      //insert new field
      UI.addField(target.parentNode, replace);
      counter = counter + 1;
      //add new event listener
      addBlock = $$(`${slide("B.slide1")} .TEAM`);
      addBlock[addBlock.length - 1].addEventListener("input", newField);
    };

constui=（（）=>{
//工具：
const$=（x）=>document.querySelector（x）；
常数$$=（x）=>{
let元素=document.queryselectoral（x）；
元素=切片数组（元素）；
返回元素；
};
常量片_数组=（x）=>{
返回Array.prototype.slice.call（x）；
};
常量幻灯片=（路径）=>{
路径=路径分割（“.”）；
返回`[scope='${path[0]}'][slide='${path[1]}']`；
};
//-------------
常量addField=（元素，替换）=>{
让HTML；
log（“replace this:+replace[0]+”替换为：“+replace[1]）；
HTML=element.outerHTML；
if（替换数组的instanceof）
HTML=element.outerHTML.replace（replace[0]，replace[1]）；
元素insertAdjacentHTML（“afterend”，HTML）；
};
返回{
addField:addField，
};
})();
常量控制器=（（用户界面，模型）=>{
//工具：
const$=（x）=>document.querySelector（x）；
常数$$=（x）=>{
let元素=document.queryselectoral（x）；
元素=切片数组（元素）；
返回元素；
};
常量片_数组=（x）=>{
返回Array.prototype.slice.call（x）；
};
常量幻灯片=（路径）=>{
路径=路径分割（“.”）；
返回`[scope='${path[0]}'][slide='${path[1]}']`；
};
//-------------
让addBlock；
addBlock=$$（`${slide（“B.slide1”）}.TEAM`）；
常量事件列表=（）=>{
addBlock[addBlock.length-1].addEventListener（“输入”，新字段）；
};
让newField=（）=>{
让我们用这个来代替这个；
addBlock=$$（`${slide（“B.slide1”）}.TEAM`）；
replaceThis=`${counter}`；
使用this=`${counter+1}`；
replace=[replaceThis，withThis]；
addField（addBlock，replace）；
};
设计数器=1；
常量addField=（addBlock，replace）=>{
e=窗口事件；
const target=e.target | | e.src元素；
//删除以前的事件侦听器
addBlock[addBlock.length-1].removeEventListener（“输入”，新字段）；
console.log（addBlock）；
//插入新字段
UI.addField（target.parentNode，replace）；
计数器=计数器+1；
//添加新事件侦听器
addBlock=$$（`${slide（“B.slide1”）}.TEAM`）；
addBlock[addBlock.length-1].addEventListener（“输入”，新字段）；
};

您可以使用而不是获取

outerHtml

和

附加它。并使用
x.insertAdjacentElement（'afterend'，clone）；
&
x=clone；

在下面试试


var addBlock=document.querySelectorAll（`.slide1.TEAM`）；
addBlock=addBlock[addBlock.length-1]；
函数addNewSimilarBlockOfCode（x）{
//将true作为参数传递以与子节点一起复制
var clone=x.cloneNode（真）；
//在上一个代码块之后插入新代码块：
//使用InsertAdjaceEntelement而不是insertAdjacentHTML
x、 插入相邻元素（“结束后”，克隆）；
//用新克隆重新声明x
x=clone；//问题出在这里。这是一个错误的代码！
log（'x的新值为：'+x）；
}
addNewSimilarBlockOfCode（addBlock）；

你好，世界
如果您希望某个对象是动态的，这通常意味着您需要一个函数为您返回一个值

您可以尝试以下方法：


//获取HTML元素的实时集合
const blocks=document.getElementsByClassName（“块”）；
打印长度（块）；
//添加更多元素并报告新长度
添加新块（块）；
打印长度（块）；
添加新块（块）；
打印长度（块）；
//获取当前是最后一个块的块
函数getLastBlock（块）{
const lastIndex=blocks.length-1；
const lastBlock=块[lastIndex]；
返回最后一个块；
}
//使用“getLastBlock”确定在何处添加更多内容
函数addNewBlock（块）{
let last=getLastBlock（块）；
last.insertAdjacentHTML（“afterend”，last.outerHTML）；
last=getLastBlock（blocks）；//现在，`last`是新块
insertAdjacentHTML（“beforeend”，“I”）；//将其与前一个块区分开
}
//报告当前的块总数
函数打印长度（块）{
log（`blocks.length=${blocks.length}`）；
}
<代码>块I < /代码>我能知道为什么我会被否决吗？我说我有类似的代码，而不是这个确切的代码。我对你的问题感到困惑。考虑修改它。保持它的简单和中立。限制基本问题。如果你这样做，你可能会找到一个解决方案自己。无论如何…x=x

是无用的。也许你应该返回

x

来获取新的。但是请注意，

x

是一个参考。如果你想要一个副本，请使用

cloneNode

。如果你返回

x

它不再是硬编码的。