How to parse simple math expressions using two variables in javascript

Question

I'm making a project to solve Runge-Kutta methods (numeric methods)

I need to parse simple maths expressions whit two variables from input text and paste in js code

For example this is one of the methods:

var x = 1, // this is the firt variable
    y = 2, // this is the second variable
    yn, fun, h = 0.05;


var i = 0;

// This is Euler method
while (x < 2) {

    i += 1;
    // this is the funcion and depends to two variables
    //here is when I need to paste the function using global variables
    fun = ((1 + x) / (1 + y));
    yn = y + h * (fun);
    console.log(" # " + i + " Yn+1 = " + yn + " Yn = " + y + " x = " + x + "\n");
    x += h;
    y = yn;

}

This is my idea for the html, is only design:

I need to take the value in the input text and parse it in js code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <link href="style.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="col-lg-4 col-lg-offset-4">
            <h1 class="text-center">Runge-Kutta Methods</h1>
            <p class="text-center">Enter the function in the terms of X and Y:</p>
            <p class="help"></p>
            <input type="text" value="((1 + x) / (1 + y))" id="input" class="form-control" />
            <table class="table">
                <thead>

                </thead>
                <tbody id="tbody">
                        <tr>
                                <th>
                                    <p class="text-center">H:</p>
                                    <input type="number" value="H" id="input" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">X:</p>
                                    <input type="number" value="X" id="input" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">f(X):</p>
                                    <input type="number" value="Y" id="input" class="form-control" />
                                </th>
                            </tr>

                </tbody>
            </table>


            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Euler</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Euler improved</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Ralston</button>
                </div>
              </div>

              <br>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Yn+1</th>
                        <th>Yn</th>
                        <th>X</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>

            <script src="main.js"></script>
</body>

</html>

you can try to use mathjs.org

Vladimir M
– Vladimir M

2018-06-03 19:13:23 +00:00
Commented Jun 3, 2018 at 19:13 — Vladimir M
– Vladimir M, Commented Jun 3, 2018 at 19:13

alex · Accepted Answer · 2018-06-28 12:40:51Z

If you want to parse simple maths expressions, you have to use <script src="http://silentmatt.com/parser3.js"></script>, then you can replace your 'x' and 'y' and you can use the function you wrote in the input.

I used you example to calculate the result of the function on click on 'euler' button.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="http://silentmatt.com/parser3.js"></script>
    <script>
    var x = 1, // this is the firt variable
    y = 2, // this is the second variable
    yn, fun, h = 0.05;


    var i = 0;

    // This is Euler method
    while (x < 2) {

        i += 1;
        // this is the funcion and depends to two variables
        //here is when I need to paste the function using global variables
        fun = ((1 + x) / (1 + y));
        yn = y + h * (fun);
        console.log(" # " + i + " Yn+1 = " + yn + " Yn = " + y + " x = " + x + "\n");
        x += h;
        y = yn;

    }
    function euler(){
        var parser = new Parser();
        //parser.parse("2 * func(2; 2)").evaluate({ func:Math.pow });
        var x = document.getElementById("inputx").value;//'1'; //parseInt(document.getElementById("inputx").value);
        var y = document.getElementById("inputy").value;

        var fun = document.getElementById("fun").value;
            fun=fun.replace('x',x);
            fun=fun.replace('y',y);
            var result = parser.parse(fun).evaluate();
        document.getElementById("res").innerHTML="resultat : "+result;
        console.log(result);
    }
    </script>

    <link href="style.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="col-lg-4 col-lg-offset-4">
            <h1 class="text-center">Runge-Kutta Methods</h1>
            <p class="text-center">Enter the function in the terms of X and Y:</p>
            <p class="help"></p>
            <input type="text" id="fun" value="((1 + x) / (1 + y))" id="input" class="form-control" />
            <table class="table">
                <thead>

                </thead>
                <tbody id="tbody">
                        <tr>
                                <th>
                                    <p class="text-center">H:</p>
                                    <input type="number" value="0" id="inputh" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">X:</p>
                                    <input type="number" value="0" id="inputx" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">f(X):</p>
                                    <input type="number" value="0" id="inputy" class="form-control" />
                                </th>
                            </tr>

                </tbody>
            </table>


            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default" onclick="euler()">Euler</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Euler improved</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Ralston</button>
                </div>
              </div>

              <br>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Yn+1</th>
                        <th>Yn</th>
                        <th>X</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
            <div id="res"></div>

            <script src="main.js"></script>
</body>

</html>

Collectives™ on Stack Overflow

How to parse simple math expressions using two variables in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related