Parameter as string in function executed by onclick in innerHTML

Question

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?

= ''+ '<div class="pi-flow-file">' ?? Why the '' if you are just going to concatenate another string? — Scott Marcus
– Scott Marcus, Commented Apr 23, 2018 at 22:32
It looks like you are concatenating uniqueIdentifer into your string properly. The real question is have you checked that uniqueIdentifier is actually being passed? — Scott Marcus
– Scott Marcus, Commented Apr 23, 2018 at 22:33
How does the extra '' add to the readability? Your adding more concatenation that doesn't need to be there. — Scott Marcus
– Scott Marcus, Commented Apr 23, 2018 at 22:34
And why document.getElementById('modal-content').innerHTML = ''; just prior to the next line that resets the innerHTML anyway? — Scott Marcus
– Scott Marcus, Commented Apr 23, 2018 at 22:36

Sébastien · Accepted Answer · 2018-04-23 22:50:52Z

4

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.

edited Apr 23, 2018 at 22:50

answered Apr 23, 2018 at 22:35

Sébastien

12.1k12 gold badges60 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2018-04-23 22:33:27Z

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

Collectives™ on Stack Overflow

Parameter as string in function executed by onclick in innerHTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related