<!DOCTYPE html> <html> <head> <title>Dynamic Equation List</title> <!– Copyright © 2012-2018 The MathJax Consortium –> <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” /> <meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
<script type=“text/x-mathjax-config”> MathJax.Hub.Config({
tex2jax: { inlineMath: [['$','$']] }
}); </script> <script src=“../MathJax/MathJax.js?config=TeX-AMS_HTML”></script>
<script> var Equation = {
// // onclick and onchange routines for buttons and type-in areas // (avoids creating new closures for each button) // addEqn: function () {Equation.Add(this)}, removeEqn: function () {Equation.Remove(this)}, updateEqn: function () {Equation.Update(this)}, // // Add a new equation prior to the one where the plus button was pressed // Create a new equation DIV with +, -, tex, and typeset areas // Insert it into the list of equations at the right spot // Typeset it and show the results (the math is initially hidden to avoid flicker) // Add: function (input) { var div = input.parentNode; var eqn = MathJax.HTML.Element("div",{},[ ["input",{type:"button",value:"+",onclick:this.addEqn}], ["input",{type:"button",value:"-",onclick:this.removeEqn}]," ", ["input",{type:"text",size:"40",onchange:this.updateEqn,style:{"margin-right":"5em"}}], ["span",{style:{visibility:"hidden"}},["${}$"]] ]); div.parentNode.insertBefore(eqn,div); MathJax.Hub.Queue( ["Typeset",MathJax.Hub,eqn], ["Show",this,eqn] ); }, // // Remove the equation and its buttons and typset form // Remove: function (input) { var eqn = input.parentNode; eqn.parentNode.removeChild(eqn); }, // // Get the element jax for the associated equation, // hide the math, set its text and typeset it, then show it again // Update: function (input) { var eqn = input.parentNode; var math = MathJax.Hub.getAllJax(eqn)[0]; MathJax.Hub.Queue( ["Hide",this,eqn], ["Text",math,input.value], ["Show",this,eqn] ); }, // // Hide and show math (during typesetting, so you don't see the initial TeX code) // Hide: function (eqn) {eqn.lastChild.style.visibility = "hidden"}, Show: function (eqn) {eqn.lastChild.style.visibility = ""}
} </script>
</head> <body>
<div id=“eqn_list”> <div><input type=“button” value=“+” onclick=“Equation.Add(this)” id=“add”/></div> </div>
<script> Equation.Add(document.getElementById(“add”)); // Create initial equation </script>
</body> </html>