从外部文件导入 object 数组时出现错误：已声明“函数”但从未读取其值 ts(6133)

Question

我有一组对象

toDo.js

export const examples = [
  {
    question: "xx",
    answer: "yy",
  },
  {
    question: "xx",
    answer: "yy",
  },....]

然后我有以下逻辑，然后将其导入index.js 。 通过这段代码<div id="examples-container"></div>然后我也导入它<script src="logic.js" type="module"></script>

我有以下问题：已声明Toggle (function)但其值从未读取 ts(6133) 。 单击按钮时出现此错误。

逻辑.js

import { examples } from "./Předměty/Matematika.js";

function toggle(i) {
  const div = document.querySelector(`#result_${i}`);
  if (div.style.display !== "none") {
    div.style.display = "none";
  } else {
    div.style.display = "block";
  }
}

let html = "";
examples.forEach((ex, i) => {
  const example = `
  <div class="card">
    <div class="example">
    ${ex.question}
    </div>
    <button type="button" class="toggle" onclick="toggle(${i})">
      Toggle
    </button>
    <div id="result_${i}" style="display:none" class="result">${ex.answer}</div>
  </div>`;
  html += example;
});
const container = document.querySelector("#examples-container");
container.innerHTML = html;

当我 consol.log（例子）。 我得到整个数组。 我也试过创建新变量然后插入数组。 整个应用程序在一个文件中时的工作方式与我预期的一样，但现在我尝试将其拆分为不同的文件，因为..你知道它是标准的，将应用程序划分为超过 1 个大文件，而且我有一些未来的计划，所以这是必要的. ^^

最好
沃伊泰赫

Answer 1

问题是 html 代码无法访问toggle function。要解决此问题，您可以手动构建 DOM 树。 因此，您可以单独创建每个元素，而不是创建一个包含 html 代码的字符串并将其附加到容器元素。

const container = document.querySelector("#examples-container");

examples.forEach((ex, i) => {
    const card = document.createElement("div");
    card.classList.add("card");

    const example = document.createElement("div");
    example.classList.add("example");
    example.innerHTML = ex.question;
    card.appendChild(example);

    const button = document.createElement("button");
    button.classList.add("toggle");
    button.innerHTML = "Toggle";
    button.addEventListener("click", () => toggle(i)); // Here is the event listener
    card.appendChild(button);

    const result = document.createElement("div");
    result.id = "result_" + i;
    result.style.display = "none";
    result.classList.add("result");
    result.innerHTML = ex.answer;
    card.appendChild(result);

    container.appendChild(card);
});