I have a scala function creating a math expression as a string like
$\log((3+x))$ each time I click on a button. I would like mathjax to be called at each click as well to allow it to render a new expression.
I've read that there is something like MathJax.Hub.Queue but how to use it with scala.js.
My HTML file :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Differantiator</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<form>
Your expression to be differentiated:<br><br>
<input type="text" name="expr" id="nodeValue">
<input type="button" onclick="addClickedMessage()"
value="Differentiate!" id="click-me-button">
</form>
<!-- Include Scala.js compiled code here -->
<!-- Include JavaScript dependencies -->
<script type="text/javascript" src="./target/scala-2.12/scala-js-tutorial-fastopt.js"></script>
</body>
</html>
and my scala file with Op, Func, Rpn objects giving strings :
package example
import org.scalajs.dom
import dom.document
import dom.html
import scalajs.js.annotation.JSExport
import scalatags.JsDom.all._
//import org.scalajs.jquery.jQuery
import scala.scalajs.js.annotation.JSExportTopLevel
import utils.Func
import utils.Rpn
import utils.Op
object App {
def appendPar(targetNode: dom.Node, text: String): Unit = {
val parNode = document.createElement("p")
val textNode = document.createTextNode(text)
parNode.appendChild(textNode)
targetNode.appendChild(parNode)
}
@JSExportTopLevel("addClickedMessage")
def addClickedMessage(): Unit = {
val expr:String = document.getElementById("nodeValue").asInstanceOf[html.Input].value.toString
appendPar(document.body, "The expression is $" + Op.show(Rpn.rpnToFunc(expr)) + "$")
appendPar(document.body, "The derivative is " +
"$" +Op.show(Op.deriv(Rpn.rpnToFunc(expr), Func.Var("x")))+ "$")
}
def main(args: Array[String]): Unit = {
addClickedMessage()
}
}
