How to append and run script on button click [JAVASCRIPT]

Question

I need some help.

Every time a user clicks a button I need to append and run a JS script. The problem I need to evaluate some conditions to load and run the script...

What I have:

var loadScriptBtn = document.getElementById("loadScript");
loadScriptBtn.onclick = loadScript()

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function loadScript() {
  if (getCookie('cookieAccepted')) {
    var serverScript = document.createElement("script");
    serverScript.type = "text/javascript";
    serverScript.src = "http://example.com/myscript";
    document.head.appendChild(serverScript);
  } else {
    alert('Please enable cookies')
  }
}

The script is being appended correctly in the body but it doesn't execute, and I need it to execute...

I looked in other questions but I couldn't find a solution that uses JavaScript, I can't use Jquery on this,

Thank you all for your time!

Giovanni Esposito · Accepted Answer · 2021-07-05 10:00:18Z

1

Try creating a new div, setting its innerHTML, then adding this new div to the DOM. Something like:

function loadScript() {
  if (getCookie('cookieAccepted')) {
    var serverScript = document.createElement("script");
    serverScript.type = "text/javascript";
    serverScript.src = "http://example.com/myscript";

    var newdiv = document.createElement('div');
    newdiv.innerHTML = serverScript;
    document.getElementById('target').appendChild(newdiv); //<-- lets say that you have a div called target in your html (<div id="target"></div>)
  } else {
    alert('Please enable cookies')
  }
}

answered Jul 5, 2021 at 10:00

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

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

Comments

Andy · Accepted Answer · 2021-07-05 09:59:07Z

0

At the moment you're assigning a string to the onclick. You want to assign a reference to the function instead:

loadScriptBtn.onclick = loadScript;

answered Jul 5, 2021 at 9:59

Andy

63.6k13 gold badges72 silver badges99 bronze badges

1 Comment

Caio César P. Ricciuti Over a year ago

hey Andy, thank you for your answer, it was just a typo :)

Kaan · Accepted Answer · 2021-07-05 12:21:44Z

0

You can use Jquery.getScript to load script file correctly

$("button").click(function(){
  $.getScript("http://example.com/myscript");
});

https://www.w3schools.com/jquery/ajax_getscript.asp

or you can do that with pure javascript like below:

//I added momentjs after page load.
function loadFile() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
 
      var s = document.createElement("script")
      s.innerText = this.responseText;//create script and append innerText
      document.head.appendChild(s);//add script element to head
      var test = moment('2016-01-01'); //test inserted js file.
      console.log(test);
    }
  };
  xhttp.open("GET", "https://momentjs.com/downloads/moment.min.js", true);
  xhttp.send();//get url content
}

<div id="demo">
<button type="button" onclick="loadFile()">Load Script</button>
</div>

edited Jul 5, 2021 at 12:21

answered Jul 5, 2021 at 10:02

Kaan

1298 bronze badges

2 Comments

Caio César P. Ricciuti Over a year ago

Hello, thank you for your answer, but I can't use Jquery on this...

Kaan Over a year ago

You can use XMLHttpRequest to do that with javascript. I pinned code in the code snipped.

Collectives™ on Stack Overflow

How to append and run script on button click [JAVASCRIPT]

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related