Cannot read DOM attribute from script loaded dynamically

Question

Including a script statically in the HTML like the one below works:

<script type="text/javascript" src="http://meerkatapp.co/widgets/embed.js" data-mute="false" data-social="false" data-cover="default" data-type="square" data-username="jessicadelfino"></script>

However, invoking the script dynamically doesn't work.

JavaScript code:

    // Create script object
    var script = document.createElement("script");

    // Configure script with Meerkat data
    script.type = "text/javascript";
    script.src = "http://meerkatapp.co/widgets/embed.js";
    script.setAttribute("data-mute", "false");
    script.setAttribute("data-social", "false");
    script.setAttribute("data-cover", "default");
    script.setAttribute("data-type", "square");
    script.setAttribute("data-username", "jessicadelfino");

    // Append script object
    $("body").append(script);

Here's where the error occurs (from http://meerkatapp.co/widgets/embed.js):

window.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

main(window.currentScript)

function main(currentScript) {
      ...
      var btnContainerElm = currentScript
      var mkBtnUsername = btnContainerElm.getAttribute("data-username")
      ...
      mkBtnUsername = mkBtnUsername.replace("@", '')

This code generates the error: Uncaught TypeError: Cannot read property 'replace' of null on the line mkBtnUsername = mkBtnUsername.replace("@", '').

Clearly mkBtnUsername is not set even though the data-username attribute is set in the script.

@StefanBaiu Caught me too: developer.mozilla.org/en-US/docs/Web/API/Document/currentScript — user2864740
– user2864740, Commented Aug 18, 2015 at 22:50
@user2864740 yeah I know, maybe he cached the value into a local var, I think more source code would make things a little more clear — user2844991
– user2844991, Commented Aug 18, 2015 at 22:57
@StefanBaiu Updated the question with more source code for currentScript ... thanks for the great questions and tips on improving the question while fostering a constructive, positive atmosphere. — Crashalot
– Crashalot, Commented Aug 18, 2015 at 23:01
@Crashalot hmm, my guess is document.currentScript is probably null (it can happen if it is called inside of an event handler, say document.ready), and your fallback function is choosing a wrong script (scripts[scripts.length - 1]). Try to log window.currentScript. — user2844991
– user2844991, Commented Aug 18, 2015 at 23:20

user2844991 · Accepted Answer · 2015-08-18 23:35:58Z

1

My guess is document.currentScript is probably null (it can happen if that property is checked inside of an event handler, say $(document).ready), and your fallback function is choosing the wrong script (scripts[scripts.length - 1]). Try to log window.currentScript.

answered Aug 18, 2015 at 23:35

user2844991

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

Collectives™ on Stack Overflow

Cannot read DOM attribute from script loaded dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related