sample-dynamic-list.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Dynamic Equation List</title>
  5. <!-- Copyright (c) 2012-2018 The MathJax Consortium -->
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <script type="text/x-mathjax-config">
  9. MathJax.Hub.Config({
  10. tex2jax: { inlineMath: [['$','$']] }
  11. });
  12. </script>
  13. <script src="../MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
  14. <script>
  15. var Equation = {
  16. //
  17. // onclick and onchange routines for buttons and type-in areas
  18. // (avoids creating new closures for each button)
  19. //
  20. addEqn: function () {Equation.Add(this)},
  21. removeEqn: function () {Equation.Remove(this)},
  22. updateEqn: function () {Equation.Update(this)},
  23. //
  24. // Add a new equation prior to the one where the plus button was pressed
  25. // Create a new equation DIV with +, -, tex, and typeset areas
  26. // Insert it into the list of equations at the right spot
  27. // Typeset it and show the results (the math is initially hidden to avoid flicker)
  28. //
  29. Add: function (input) {
  30. var div = input.parentNode;
  31. var eqn = MathJax.HTML.Element("div",{},[
  32. ["input",{type:"button",value:"+",onclick:this.addEqn}],
  33. ["input",{type:"button",value:"-",onclick:this.removeEqn}]," ",
  34. ["input",{type:"text",size:"40",onchange:this.updateEqn,style:{"margin-right":"5em"}}],
  35. ["span",{style:{visibility:"hidden"}},["${}$"]]
  36. ]);
  37. div.parentNode.insertBefore(eqn,div);
  38. MathJax.Hub.Queue(
  39. ["Typeset",MathJax.Hub,eqn],
  40. ["Show",this,eqn]
  41. );
  42. },
  43. //
  44. // Remove the equation and its buttons and typset form
  45. //
  46. Remove: function (input) {
  47. var eqn = input.parentNode;
  48. eqn.parentNode.removeChild(eqn);
  49. },
  50. //
  51. // Get the element jax for the associated equation,
  52. // hide the math, set its text and typeset it, then show it again
  53. //
  54. Update: function (input) {
  55. var eqn = input.parentNode;
  56. var math = MathJax.Hub.getAllJax(eqn)[0];
  57. MathJax.Hub.Queue(
  58. ["Hide",this,eqn],
  59. ["Text",math,input.value],
  60. ["Show",this,eqn]
  61. );
  62. },
  63. //
  64. // Hide and show math (during typesetting, so you don't see the initial TeX code)
  65. //
  66. Hide: function (eqn) {eqn.lastChild.style.visibility = "hidden"},
  67. Show: function (eqn) {eqn.lastChild.style.visibility = ""}
  68. }
  69. </script>
  70. </head>
  71. <body>
  72. <div id="eqn_list">
  73. <div><input type="button" value="+" onclick="Equation.Add(this)" id="add"/></div>
  74. </div>
  75. <script>
  76. Equation.Add(document.getElementById("add")); // Create initial equation
  77. </script>
  78. </body>
  79. </html>