CODEWITHSUNDEEP
javascriptescaping
Mike Johnson Jr
Mike Johnson Jr

Reputation: 796

Parameter as string in function executed by onclick in innerHTML

Here is my code:

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

As you can imagine, with my API.upload_to_ad() function, I am getting a <uniqueIdentifier-string> is undefined.

I need to pass uniqueIdentifier as a string rather than an identifier for this to work.

How do I do this?

Upvotes: 0

Views: 1366

Answers (2)

S&#233;bastien
S&#233;bastien

Reputation: 12139

You probably just need to add quotes to your argument, otherwise it is interpreted as an identifier:

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

Note that you have to escape those single quotes.

Upvotes: 4

CertainPerformance
CertainPerformance

Reputation: 370679

Inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. You should attach the listener properly using Javascript instead:

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

You also might consider using template literals instead, they're a lot easier to work with than manually concatenating strings over multiple lines:

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

Upvotes: 0

Related Questions