How to call javascript js file from html?

JavaScript
1

First, let me say that I know very little about javascript so please bear with me.
What I’m trying to do is take an existing script (inline to an html page) and convert it to an external js script that can then be called from any html page.

I started with an html from Davide P. Cervone that contains an inline script. (I’m not permitted to post a link here but I can post his entire code here if needed.) His script allows mathjax equations to be renumbered. This works fine in my html editor (Pinegrow) and in a browser.

I then saved Cervone’s script as number_equations_11b.js. (Note that Cervone’s script is from 2016 if this makes any difference.)

  MathJax.Hub.Register.StartupHook("TeX AMSmath Ready",function () {
    var sectionDefault = {name: "", num: 0};
    var sections = {}, section = sectionDefault;
  
    //
    //  The MathJax objects we need to modify
    //
    var TEX = MathJax.InputJax.TeX, PARSE = TEX.Parse;
    var AMS = MathJax.Extension["TeX/AMSmath"];
  
    //
    //  Add \section{n} and \seteqnumber{n} macros
    //
    TEX.Definitions.Add({
      macros: {
        section: "mySection",
        seteqnumber: "mySetEqNumber"
      }
    });
  
    PARSE.Augment({
      //
      //  \section{n}
      //    Sets the current section.  The n is used in tags and also in
      //    the anchor names.  The equation numbers are set to 0 when the
      //    section is changed.  If a section is reused, the numbers restart
      //    where we left off.
      //
      mySection: function (name) {
        section.num = AMS.number;
        var n = this.GetArgument(name);
        if (n === "") {
          section = sectionDefault;
        } else {
          if (!sections["_"+n]) sections["_"+n] = {name:n, num:0};
          section = sections["_"+n];
        }
        AMS.number = section.num;
      },
  
      //
      //  \seteqnumber{n}
      //     sets the next equation number to be n (a positive integer).
      //
      mySetEqNumber: function (name) {
        var n = this.GetArgument(name);
        if (!n || !n.match(/^ *[0-9]+ *$/)) n = ""; else n = parseInt(n)-1;
        if (n === "" || n < 1) TEX.Error("Argument to "+name+" should be a positive integer");
        AMS.number = n;
      }
    });
  
    //
    //  Configure the formatting of the tags and IDs.  The IDs need to 
    //  include the secetion number as well so that the equations in 
    //  different sections get different anchors.
    //
    MathJax.Hub.Config({
      TeX: {
        equationNumbers: {
          formatTag: function (n) {return "("+(section.name+"."+n).replace(/^\./,"")+")";},
          // 5/Apr/2023 - the following is the original but gave syntax error without the ; before the final }
          // Check this section alone in https://extendsclass.com/javascript-fiddle.html            
          //   formatTag: function (n) {return "("+(section.name+"."+n).replace(/^\./,"")+")"},
          formatID: function (n) {
            n = (section.name+'.'+n).replace(/[:"'<>&]/g,"").replace(/^\./,"");
            return 'mjx-eqn-' + n;
          }
        }
      }
    });
    
    
    MathJax.Hub.Config({
      TeX: {
        equationNumbers: {
          autoNumber: "AMS"
        }
      }
    });
         
  });

My calling html is –

<!DOCTYPE html>

<html>
<head>
    <title>Equation numbers by section</title>

    <!-- 2023-04-06 - original from below; must come before next script or no equation numbers ever -->
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

    <!-- 2023-04-04 - includes full path -->
    <script type="text/javascript" src="/_scripts/mathjax/number_equations_11b.js"></script>  

</head>
    
<body>
<p>Demo --</p>
<p></p>

<p>Default numbering --</p>
\begin{align}
  a+b &= c
\end{align}

<p>Start section E --</p>
<div style="display:none; position:absolute">
\(\section{E}\)
</div>

\begin{equation}
E=mc^2
\end{equation}

<p class="_eqn_latex notranslate"> 
\begin{align} \label{eq:10301a}
\widehat{U} = \frac{\overline{U}_{min}}{\overline{U}_{max}}
\end{align}
</p>

<p>Start section 1 --</p>
<div style="display:none; position:absolute">
\(\section{1}\)
</div>

\begin{align}
  p+q &= r
\end{align}

\begin{align}
  x+y &= z
\end{align}

<p>Back to default numbering --</p>
<div style="display:none; position:absolute">
<!-- back to the default numbering sequence -->
\(\section{}\)
</div>

\begin{align}
  t+u &= v
\end{align}

</body>
</html>

The output should look like this –

image

When I repeatedly refresh Pinegrow’s wysiwyg window, sometimes the equation numbers appear and sometimes they don’t. When I preview the html in Microsoft Edge (using Pinegrow’s browser preview feature) the equation numbers never appear.

My newbie guess – the html that displays the equations executes before number_equations_11b.js can load. If so, I don’t know how to correct this.

I’ve been trying to resolve this for several days so I’d appreciate any suggestions. (Let me know if you need clarification or more info.)

Thanks,
Don C.

2

You may need to post the full inline code that does work.

3

Try using:

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML-full

instead of:

https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full

for the first script element’s src attribute value. It seems to work when I use that instead (at least on Chrome). I do not have Edge to test it on that browser.

4

Here’s the inline code that works (basically from Cervone with my comments). Note that I’m trying to convert all of my html pages to mathjax 3.x and I don’t want any conflict with mathjax 2.x.

<!DOCTYPE html>
<!--
From https://groups.google.com/g/mathjax-users/c/jUtewUcE2bY/m/0-sg2F2aCAAJ
-->

<html>
<head>
  <title>Equation numbers by section</title>
  <script type="text/x-mathjax-config">
  MathJax.Hub.Register.StartupHook("TeX AMSmath Ready",function () {
    var sectionDefault = {name: "", num: 0};
    var sections = {}, section = sectionDefault;
  
    //
    //  The MathJax objects we need to modify
    //
    var TEX = MathJax.InputJax.TeX, PARSE = TEX.Parse;
    var AMS = MathJax.Extension["TeX/AMSmath"];
  
    //
    //  Add \section{n} and \seteqnumber{n} macros
    //
    TEX.Definitions.Add({
      macros: {
        section: "mySection",
        seteqnumber: "mySetEqNumber"
      }
    });
  
    PARSE.Augment({
      //
      //  \section{n}
      //    Sets the current section.  The n is used in tags and also in
      //    the anchor names.  The equation numbers are set to 0 when the
      //    section is changed.  If a section is reused, the numbers restart
      //    where we left off.
      //
      mySection: function (name) {
        section.num = AMS.number;
        var n = this.GetArgument(name);
        if (n === "") {
          section = sectionDefault;
        } else {
          if (!sections["_"+n]) sections["_"+n] = {name:n, num:0};
          section = sections["_"+n];
        }
        AMS.number = section.num;
      },
  
      //
      //  \seteqnumber{n}
      //     sets the next equation number to be n (a positive integer).
      //
      mySetEqNumber: function (name) {
        var n = this.GetArgument(name);
        if (!n || !n.match(/^ *[0-9]+ *$/)) n = ""; else n = parseInt(n)-1;
        if (n === "" || n < 1) TEX.Error("Argument to "+name+" should be a positive integer");
        AMS.number = n;
      }
    });
  
    //
    //  Configure the formatting of the tags and IDs.  The IDs need to 
    //  include the secetion number as well so that the equations in 
    //  different sections get different anchors.
    //
    MathJax.Hub.Config({
      TeX: {
        equationNumbers: {
          formatTag: function (n) {return "("+(section.name+"."+n).replace(/^\./,"")+")";},
          // 5/Apr/2023 - the following is the original but gave syntax error without the ; before the final }
          // Check this section alone in https://extendsclass.com/javascript-fiddle.html            
          //   formatTag: function (n) {return "("+(section.name+"."+n).replace(/^\./,"")+")"},
          formatID: function (n) {
            n = (section.name+'.'+n).replace(/[:"'<>&]/g,"").replace(/^\./,"");
            return 'mjx-eqn-' + n;
          }
        }
      }
    });
    
    
    MathJax.Hub.Config({
      TeX: {
        equationNumbers: {
          autoNumber: "AMS"
        }
      }
    });
      
    
  });
  </script>

<!-- 6/Apr/2023 - moved above to be included in single script  
  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    TeX: {
      equationNumbers: {
        autoNumber: "AMS"
      }
    }
  });
  </script>
-->

<!-- 4/5/2023 - doesn't work; writes equations but no numbers 
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-->

<!-- 4/5/2023 - doesn't work; writes equations but numbers are consecutive
<script src="/_scripts/mathjax/load_mathjax.js" async></script>
-->

  <!-- 2023-04-04 - original -->
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

</head>
    
<body>

<p>Default numbering --</p>
\begin{align}
  a+b &= c
\end{align}

<p>Start section E --</p>
<div style="display:none; position:absolute">
\(\section{E}\)
</div>

\begin{equation}
E=mc^2
\end{equation}

\begin{align}
E=mc^2 \, !2
\end{align}


<p class="_eqn_latex notranslate"> 
\begin{align} \label{eq:10301a}
\widehat{U} = \frac{\overline{U}_{min}}{\overline{U}_{max}}
\end{align}
</p>

<p>According to the requirements of equation&nbsp;\eqref{eq:10301a}, the amplitudes ...</p>


<p>Start section 1 --</p>
<div style="display:none; position:absolute">
\(\section{1}\)
</div>

\begin{align}
  a1+b &= c
\end{align}

\begin{align}
  a+b &= c
\end{align}


<p>Start section 1.1 --</p>
<div style="display:none; position:absolute">
\(\section{1.1}\)
</div>

\begin{align}
  a+b &= c
\end{align}

\begin{align}
  a+b &= c
\end{align}

<p>Back to default numbering --</p>
<div style="display:none; position:absolute">
<!-- back to the default numbering sequence -->
\(\section{}\)
</div>

\begin{align}
  a+b &= c
\end{align}

<p>Return to section E --</p>

<div style="display:none; position:absolute">
<!-- back to numbers starting with "E." starting where we left off -->
\(\section{E}\)
</div>

\begin{equation}
E=mc^2
\end{equation}

\begin{equation}
E=mc^2
\end{equation}

</body>
5

V3 is not a drop-in replacement for V2
https://docs.mathjax.org/en/latest/upgrading/v2.html

6

Yes, I understand that.

Can the script be modified so that it is compatible with mathjax 3.x ? Do you know which sections of the code are incompatible?

7

The docs have that info. I’m not going to go through all the code.

The MathJax.Hub.Register.StartupHook has been replaced so all the code inside that is not going to work (I would assume).