Question

这是我的代码：

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>';
        },
}

您可以想象，使用我的API.upload_to_ad（）函数，我得到的是<uniqueIdentifier-string> is undefined。

我需要将uniqueIdentifier作为字符串而不是标识符传递给它。

我该怎么做？

Answer 1

您可能只需要在参数中添加引号，否则将其解释为标识符：

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

请注意，您必须转义那些单引号。

Answer 2

内联事件处理程序在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));
  }
}

您也可以考虑使用模板文字，与在多行上手动连接字符串相比，它们更易于使用：

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));
  }
}

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

2 个答案: