How to pass parameters to jquery via script tag

Question

What my code does: It switches out the class of a div when i push a button. So i can push a button and the class changes from "Class" to "SwitchToThisClass" which has a different set of properties.

<script src="JS/SideNav-ShowOrHide.js"></script>

Here is my code, how do i change it so i can put parameters in and i also want to use the same JS file to change multiple classes:

(function() {

  var bodyEl = $('body'),
    navToggleBtn = bodyEl.find('Class');

  navToggleBtn.on('click', function(e) {
    bodyEl.toggleClass('SwitchToThisClass');
    e.preventDefault();
  });

})();

For example like this code that takes parameters and is clean, i want to be able to use the same JS file with different parameters. I want to switch out 'Class' and 'SwitchToThisClass', and take parameters instead.

HTML:

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

Outside JS file:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

Hope this makes sense, thanks for the help in advance.

I think what @user5328504 means is that the the function shown appears to not be accepting any arguments nor requiring them, so what are you trying to pass and why? — Alexander Nied, Apr 27 '17 at 17:24
@Sam please provide more details, provided details are not sufficient to answer. — Vikas Sardana, Apr 27 '17 at 17:25
[ask] -- it often helps to look at the question you're asking and ask yourself, if I were looking at this for the first time, would I have everything I need to understand and answer the question? — Alexander Nied, Apr 27 '17 at 17:29

score 0 · Answer 1 · edited May 23 '17 at 11:54

In your purpose what you propose does not make much sense since there are better ways and more accessible and that will also allow you to modularize functions and pass parameters. However you have the possibility to add custom attributes to HTML tags if it is your final decision.

As you continue editing your question I continue editing my answer so. Solution using data HTML attribute. and data HTML attribute documentation.

I personally do not like use it for script tag and I can not recommend it way. Why? Because your source is a file not a function. A file have not parameters (said in some way). 'Visual' HTML tags/elements or stuff that is structure of the page is more related with this data binding. Unless your intention is to manipulate the tag itself in the first instance. What I think is never. I would never use it to pass parameters to a contained function in the file. Of course I am here giving my opinion. The solution exist.

Also you are facing old browsers support in your case.

What I understand you want have some static values in specific html file used to pass throught to a JS function contained in a JS file.

What you can do is first import your JS file that contains your JS function:

<script src="JS/SideNav-ShowOrHide.js"></script>

We suppose you have a function I have call 'changeFunction' in this file. Your function need to have some input parameters and then you can do from your HTML inmediatly after your file import.

<script>
var classFrom = "class1";
var classTo = "class2";
changeFunction(classFrom, classTo);
</script>

or directly:

<script>
changeFunction("class1","class2");
</script>

By other hand if what you need is manage classes of specific items give a look to how to add/remove classes from raw JS

How to pass parameters to jquery via script tag

1 Answers1