无法使用 JavaScript 将新项目添加到列表中

Question

我目前正在解决与 JavaScript 相关的问题，特别是涉及动态向列表添加新项目的问题。在我的项目中，我使用 .ejs 模板和 Node.js 开发了一个基于 Web 的表单。该表单与用作数据库的 Excel 文件紧密相关。 Excel 文件中的每个工作表都对应一个不同的类别，如果用户没有找到所需的选项，它会询问用户在表单中输入的内容。它应该为每个类别生成一个 22 位代码。

问题在于负责此动态添加的 JavaScript 功能。尽管我尽了最大努力，系统仍无法找到添加新项目并生成相应代码所需的输入元素。这导致无法将新生成的代码保存到 Excel 文件并随后更新表单。

预先感谢您的时间和支持！

我的脚本的 ejs 部分，错误是：

 function addNew(sheetName) {
  console.log('addNew called with sheetName:', sheetName);

  const newInput = document.getElementById(`new${sheetName}`);
  console.log('newInput element:', newInput);

  if (!newInput) {
    console.log(`Input element for ${sheetName} not found.`);
    return;
  }

  const inputValue = newInput.value;
  console.log('Input value:', inputValue);

  if (!inputValue.trim()) {
    console.log('Input is empty. Not adding to the sheet.');
    return;
  }

      // Send the data to the server using Axios AJAX request
      axios.post('/add', { sheetName, newInput })
        .then(response => {
          console.log('Data added successfully:', response.data);

          // Update the current page with the newly added data
          const newRow = `<tr><td>${newInput}</td><td>${response.data.code}</td></tr>`;
          const tableBody = document.getElementById(`${sheetName.toLowerCase()}TableBody`);
          tableBody.insertAdjacentHTML('beforeend', newRow);

          // Clear the input field after adding
          document.getElementById(`new${sheetName}`).value = '';
        })
        .catch(error => {
          console.error('Error adding data:', error);
        });
    }

我仔细检查了代码，验证了输入元素 ID 和工作表名称之间的对齐情况，并确认了 HTML 渲染和脚本执行的顺序。此外，我还集成了 console.log 语句来跟踪数据流并查明问题的根源。然而，问题的根本原因仍然让我困惑。

此外，我也在努力摆脱内容安全策略。即使经过多次尝试和互联网上的解决方案，它也不会消失。

错误截图：