使用 DOM 調用多個函數和 Append 元素

Question

我目前正在練習使用 DOM 並對其進行操作。 現在，我正在練習為一般的答題器風格游戲創建代碼。 每次單擊該工具時工具都會上升，並且我有一個玩家可以購買和打開/解鎖的構建器（如果工具的數量足以購買）。

我在嘗試調用多個函數時遇到了困難，而且在通過附加 div 元素來操作 DOM 時（如果這有意義的話）。 我知道我必須遍歷下面的數據，然后在循環之外我需要 append 一些 div 元素到構建器容器。

我正在使用的數據：

data = {
        tools: 200,
        builders: [
          { id: 'builder_A', price: 100, unlocked: false },
          { id: 'builder_B', price: 400, unlocked: false },
          { id: 'builder_C', price: 700, unlocked: false }
        ]
      };

我正在使用的規格：

           calls document.getElementById()
        
        appends some builder div elements to the builder container
        const builderContainer = document.getElementById('builder_container');
        assert.isAbove(builderContainer.childNodes.length, 0);
    
        unlocks any locked builders that need to be unlocked
          code.renderBuilders(data);
          expect(data.builders[0].unlocked).to.be.equal(true);
          expect(data.builders[1].unlocked).to.be.equal(true);
          expect(data.builders[2].unlocked).to.be.equal(false);
        
        only appends unlocked builders
      code.renderBuilders(data);
      const builderContainer = document.getElementById('builder_container');
      expect(builderContainer.childNodes.length).to.be.equal(2);
      expect(builderContainer.childNodes[0].childNodes).to.have.length(5);
        
        deletes the builder container's children before appending new builders
const builderContainer = document.getElementById('builder_container');
      const fakeBuilder = document.createElement('div');
      container.appendChild(fakeBuilder);
      code.renderBuilders(data);
      expect(builderContainer.childNodes.length).to.be.equal(2);
      expect(builderContainer.childNodes[0].childNodes).to.have.length(5);

這是我迄今為止編寫的代碼：

    function renderBuilders(data) {
  let builderContainer = document.getElementById('builder_container');
  for (let i = 0; i < data.length; i++) {
    const newBuilder = currentBuilder; // storing the current builder in a new variable, but not sure if this would be the correct route?
    currentBuilder = makeBuilderDiv(); // which already creates a builder container div
     
    let deletedBuilder = deleteAllChildNodes(); // this function deletes the builder container's children before appending new builders

    let unlockedBuilder = getUnlockedBuilders(); // this function would unlock any locked builders that need to be unlocked
  }
  builderContainer.appendChild(builder);

}

但是，但是當我在循環之外嘗試 append 時，我收到了這個錯誤（對於已經創建的不同的 function）：

function updateToolsPerSecondView(tps) {
  const tpsView = document.getElementById('tps');
  tpsView.innerText = tps;
}
TypeError: Attempted to wrap getElementById which is already wrapped

我相信我將不得不在循環中調用這 3 個函數並可能創建要存儲的新變量，但我似乎無法弄清楚循環本身缺少什么以及為什么會出現錯誤.

任何幫助，將不勝感激！

Answer 1

無論您的代碼是否在循環中執行， getElementById都應該執行一次。 錯誤消息顯示TypeError: Attempted to wrap getElementById which is already wrapped packed ，其中一個帶有 function 的標簽本身就有一個標簽。 在 function updateToolsPerSecondView中，它將 tpsView 內部文本更改為 html 標記。 它應該是一個字符串。 你可能會改變

tpsView.innerText = tps;

至

tpsView.innerText = tps.innerText;

tpsView.innerText不能有標簽作為它的值。