Как подключить MathJax и Math.js к слайдерам - PullRequest
Новая
       23

Как подключить MathJax и Math.js к слайдерам

0 голосов
/ 16 мая 2018

Я нашел несколько примеров пользовательского ввода, который автоматически обновляет уравнение MathJax, проанализированное с библиотекой javascript Math.js ( пример ), но, кажется, оно прерывается всякий раз, когда я по какой-то причине подключаю его к ползункам.

Вот CodePen Я играл с этим.Может кто-нибудь объяснить, почему MathJax неожиданно перестает работать и как я могу это исправить? Вот код для приведенного выше примера.Вот строка моего js-кода, так как я не могу опубликовать этот вопрос без него: dynamic_equation.value = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';

1 Ответ

0 голосов
/ 17 мая 2018

Основная проблема заключается в том, что вместо однократной инициализации dynamic_equation его innerHTML всегда сбрасывается. Это означает, что предыдущий вывод MathJax удален, включая объект Jax, который ищется позже.

Я предполагаю, что вы сделали это, потому что у вас были проблемы с синхронизацией с MathJax при первой загрузке.

Вот небольшая модификация, которая может сделать то, что вы после. (Можно было бы потрудиться, чтобы устранить дрожание, например, рендеринг MathJax во временном узле и замена вывода.) 

function draw() {
  var aNode = document.querySelector("#a");
  var k_m = aNode.value;
  aNode.parentNode.querySelector("output").textContent = k_m;

  var bNode = document.querySelector("#b");
  var i = bNode.value;
  bNode.parentNode.querySelector("output").textContent = i;

  var cNode = document.querySelector("#c");
  var k_i = cNode.value;
  cNode.parentNode.querySelector("output").textContent = k_i;

  var vmax = 2;

  var dynamic_equation = document.getElementById('dynamic_equation'),
      result = document.getElementById('result');

  var mathjsinput = '1/' + vmax + ' + ' + k_m + '/' + vmax + '(1 + ' + i + '/' + k_i + ')';
  var texstring =  '$$\\frac{1}{V_0} = ' + math.parse(mathjsinput).toTex() + '\\biggl(\\frac{1}{[S]}\\biggr)$$';
  result.innerHTML = math.format(math.eval(mathjsinput));

  var node = null;

  try {
    // parse the expression
    node = math.parse(mathjsinput);
  }
  catch (err) {}

  try {
    // export the expression to LaTeX
    var latex = node ? node.toTex() : '';
    console.log('LaTeX expression:', latex);//

    // display and re-render the expression
    MathJax.Hub.Queue(function () {
      var elem = MathJax.Hub.getAllJax('dynamic_equation')[0]
      MathJax.Hub.Queue(['Text', elem, latex]);
      });
  }
  catch (err) {}
};

window.onload = draw;
body,
html,
table td,
table th,
input[type=text] {
  font-size: 11pt;
  font-family: verdana, arial, sans-serif;
}

h1 {
  font-size: 11pt;
}

input[type=text] {
  padding: 5px;
  width: 400px;
}

table {
  border-collapse: collapse;
}

table td,
table th {
  padding: 5px;
  border: 1px solid lightgray;
}

table th {
  background-color: lightgray;
}

form.user{
	float: left;
	width: 24rem;
  padding: 0;
}
<head>
  <title>math.js | pretty printing with MathJax</title>

  <script src="https://unpkg.com/mathjs@4.2.2/dist/math.min.js"></script>
  <script>
  window.MathJax = {
  "fast-preview": {
    disabled: true
  }
};

  </script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML.js"></script>
</head>
<body>
   <div class="input">
		  <form class="user">
      
			  <fieldset>
          <label>
            Please input value of K<sub>M</sub> between 0 to 100
          </label>
          <input id=a type=range min=0 max=100 step=1 oninput="draw();" value=7 />K<sub>M</sub> = 
			    <output />
			  </fieldset>

			  <fieldset>
				  <label>
            Please input value of I between 0 to 100
          </label>
          <input id=b type=range min=0 max=100 step=1 oninput="draw()" value=2 />I = 
				  <output />
			  </fieldset>
        
			  <fieldset>
				  <label>
            Please input value of K<sub>i</sub> between 0 to 100
          </label>
          <input id=c type=range min=0 max=100 step=1 oninput="draw()" value=4 />K<sub>i</sub> = 
				  <output />
			  </fieldset>
		  </form>
    </div>
  <table>
    <tr>
      <th>Dynamic Equation</th>
      <td><div id="dynamic_equation">$$$$</div></td>
    </tr>
    <tr>
      <th>Result</th>
      <td><div id="result"></div></td>
    </tr>
  </table>
</body>
...