HTML 启用 div onclick 中的脚本代码

Question

I have a div that looks like this:

<div id="scriptDiv">
  <script src="URL" id="someId" my-token=""></script>
</div>

I can´t run the script tag within that scriptDiv until I have a token and that token is given when the user presses a button. I can´t render that token until I know that the user want to choose this choice.

So I have a button that renders some JS code when it´s pressed and adds the token to the div with this code:

$('#someId').attr('my-token', token);

So the issue is that the scriptDiv is called when the HTML page renders and I get an error. I only want the scriptDiv to be called when the user has pressed my button.

So is it possible to only call the scriptDiv when the button is pressed and not when the page is rendered?

Answer 1

If you don't want a script to be executed don't put it in the html or dom until you are ready

<div id="scriptDiv"></div>

Then in your button event create the script element, set it's src to the url, and then append it to the document

$("#button").click(function(){
   var s = document.createElement("script");
   s.src = "http://www.example.com/jsfile.js";
   s.setAttribute("my-token","whatever your token is"); 
   $("#scriptDiv").append(s);
});

Answer 2

You should set the token attribute of script tag inside the button click event as below.

$('#buttonId').click(function (){
 $('#someId').attr('my-token', token);
});

Answer 3

I think you're going about this the wrong way. Look into doing a callback for when you want your code to run and bind that with an event to your button. You can control how that is done in JavaScript. For example, sorry I'm using jQuery here,

$('#myButton').on('click', function(){
 //your code here
});

This way it will only run when your button is clicked.

Answer 4

You could put the js you want to run in a function eg

function scriptDiv(){
    // Your js here
}

When you want the script to run (when the token is set) just use something that calls the function like:

<button onclick="scriptDiv()"></button>

You could also check every second if the token is set eg

setInterval(function(){if (tokenIsSet) {scriptDiv}},500);