Javascript 在innerHTML中由onclick执行的函数中作为字符串的参数

这是我的密码：

Template = {
    create_progress_div : function(uniqueIdentifier){
            document.getElementById('modal-content').innerHTML = '';
            document.getElementById('modal-content').innerHTML = ''+
                '<div class="pi-flow-file">'+
                    '<label name="pi-flow-text">'+uniqueIdentifier+'</label>'+
                    '<progress name="pi-flow-bar" id="'+uniqueIdentifier+'" max="100" value="0"></progress>'+
                    '<div name="pi-flow-action" nowrap="nowrap">'+
                        '<button href="#" onclick="API.upload_to_ad('+uniqueIdentifier+')">'+
                            '<img src="js/flow/resume.png" title="Resume upload" />'+
                        '</button>'+
                    '</div>'+
                '</div>';
        },
}

模板={
创建进度分区：函数（唯一标识符）{
document.getElementById（'modal-content'）。innerHTML=''；
document.getElementById（'modal-content'）。innerHTML=''+
''+
''+唯一标识符+''+
''+
''+
''+
''+
''+
''+
'';
},
}

可以想象，使用我的API.upload\u to\u ad（）函数，我得到了一个

未定义的

我需要将
uniqueIdentifier
作为字符串传递，而不是作为标识符，这样才能工作

如何做到这一点？
内联事件处理程序本质上是HTML标记内部的
eval
——它们是一种不好的做法，会导致代码分解不良，难以管理。您应该使用Javascript正确连接侦听器：

Template = {
  create_progress_div : function(uniqueIdentifier){
    const modalContent = document.getElementById('modal-content');
    modalContent.innerHTML = 
      '<div class="pi-flow-file">'+
      '<label name="pi-flow-text">'+uniqueIdentifier+'</label>'+
      '<progress name="pi-flow-bar" id="'+uniqueIdentifier+'" max="100" value="0"></progress>'+
      '<div name="pi-flow-action" nowrap="nowrap">'+
      '<button href="#" onclick="API.upload_to_ad('+uniqueIdentifier+')">'+
      '<img src="js/flow/resume.png" title="Resume upload" />'+
      '</button>'+
      '</div>'+
      '</div>';
    modalContent.querySelector('button')
      .addEventListener('click', () => API.upload_to_ad(uniqueIdentifier));
  }
}

模板={
创建进度分区：函数（唯一标识符）{
const modalContent=document.getElementById（'modal-content'）；
modalContent.innerHTML=
''+
''+唯一标识符+''+
''+
''+
''+
''+
''+
''+
'';
modalContent.querySelector（'按钮'）
.addEventListener（'click'，（）=>API.upload_to_ad（uniqueIdentifier））；
}
}

您也可以考虑使用模板文字，它们比手动在多行上连接字符串要容易得多：
Template = {
  create_progress_div : function(uniqueIdentifier){
    const modalContent = document.getElementById('modal-content');
    modalContent.innerHTML = `
      <div class="pi-flow-file">
      <label name="pi-flow-text">${uniqueIdentifier}</label>
      <progress name="pi-flow-bar" id="${uniqueIdentifier}" max="100" value="0"></progress>
      <div name="pi-flow-action" nowrap="nowrap">
      <button href="#" onclick="API.upload_to_ad(${uniqueIdentifier})">
      <img src="js/flow/resume.png" title="Resume upload" />
      </button>
      </div>
      </div>`;
    modalContent.querySelector('button')
      .addEventListener('click', () => API.upload_to_ad(uniqueIdentifier));
  }
}

模板={
创建进度分区：函数（唯一标识符）{
const modalContent=document.getElementById（'modal-content'）；
modalContent.innerHTML=`
${uniqueIdentifier}
`;
modalContent.querySelector（'按钮'）
.addEventListener（'click'，（）=>API.upload_to_ad（uniqueIdentifier））；
}
}
内联事件处理程序本质上是HTML标记内部的
eval
——它们是一种不好的做法，会导致代码分解不良，难以管理。您应该使用Javascript正确连接侦听器：

Template = {
  create_progress_div : function(uniqueIdentifier){
    const modalContent = document.getElementById('modal-content');
    modalContent.innerHTML = 
      '<div class="pi-flow-file">'+
      '<label name="pi-flow-text">'+uniqueIdentifier+'</label>'+
      '<progress name="pi-flow-bar" id="'+uniqueIdentifier+'" max="100" value="0"></progress>'+
      '<div name="pi-flow-action" nowrap="nowrap">'+
      '<button href="#" onclick="API.upload_to_ad('+uniqueIdentifier+')">'+
      '<img src="js/flow/resume.png" title="Resume upload" />'+
      '</button>'+
      '</div>'+
      '</div>';
    modalContent.querySelector('button')
      .addEventListener('click', () => API.upload_to_ad(uniqueIdentifier));
  }
}

模板={
创建进度分区：函数（唯一标识符）{
const modalContent=document.getElementById（'modal-content'）；
modalContent.innerHTML=
''+
''+唯一标识符+''+
''+
''+
''+
''+
''+
''+
'';
modalContent.querySelector（'按钮'）
.addEventListener（'click'，（）=>API.upload_to_ad（uniqueIdentifier））；
}
}

您也可以考虑使用模板文字，它们比手动在多行上连接字符串要容易得多：
Template = {
  create_progress_div : function(uniqueIdentifier){
    const modalContent = document.getElementById('modal-content');
    modalContent.innerHTML = `
      <div class="pi-flow-file">
      <label name="pi-flow-text">${uniqueIdentifier}</label>
      <progress name="pi-flow-bar" id="${uniqueIdentifier}" max="100" value="0"></progress>
      <div name="pi-flow-action" nowrap="nowrap">
      <button href="#" onclick="API.upload_to_ad(${uniqueIdentifier})">
      <img src="js/flow/resume.png" title="Resume upload" />
      </button>
      </div>
      </div>`;
    modalContent.querySelector('button')
      .addEventListener('click', () => API.upload_to_ad(uniqueIdentifier));
  }
}

模板={
创建进度分区：函数（唯一标识符）{
const modalContent=document.getElementById（'modal-content'）；
modalContent.innerHTML=`
${uniqueIdentifier}
`;
modalContent.querySelector（'按钮'）
.addEventListener（'click'，（）=>API.upload_to_ad（uniqueIdentifier））；
}
}
您可能只需要在参数中添加引号，否则它会被解释为标识符：

'<button href="#" onclick="API.upload_to_ad(\'' + uniqueIdentifier + '\')">'+
     '<img src="js/flow/resume.png" title="Resume upload" />'+
 '</button>'+

“”+
''+
''+

请注意，您必须转义这些单引号。
您可能只需要在参数中添加引号，否则它将被解释为标识符：

'<button href="#" onclick="API.upload_to_ad(\'' + uniqueIdentifier + '\')">'+
     '<img src="js/flow/resume.png" title="Resume upload" />'+
 '</button>'+

“”+
''+
''+

请注意，您必须转义这些单引号。
='+'
？？如果您只是要连接另一个字符串，为什么要使用
'
？为了可读性，看起来您正在将
uniqueIdentifer
正确连接到字符串中。真正的问题是您是否检查了
uniqueIdentifier
是否实际被传递？额外的
'
如何增加可读性？您添加了更多不需要的连接。为什么
document.getElementById（'modal-content'）。innerHTML=''就在重置
innerHTML的下一行之前？
='+'
？？如果您只是要连接另一个字符串，为什么要使用
'
？为了可读性，看起来您正在将
uniqueIdentifer
正确连接到字符串中。真正的问题是您是否检查了
uniqueIdentifier
是否实际被传递？额外的
'
如何增加可读性？您添加了更多不需要的连接。为什么
document.getElementById（'modal-content'）。innerHTML=''就在重置
innerHTML
的下一行之前？