javascriptpythoneel

Display python result in html using JavaScript | python eel

I want to send result to JavaScript to display the result in html using eel.

I'm adding the two numbers reading it from JavaScript through html & I want to display the result in html side at the end..

main.py

import eel
import requests

eel.init('web')

@eel.expose
def sum(a,b):
    c = int(a) + int(b) 
    print(c)
    return c

eel.start('index.html', size=(500, 500))

main.js

function sum() {
  var a = document.getElementById("data_1").value;
  var b = document.getElementById("data_2").value;
  eel.sum(a, b);
}

index.html

<!doctype html>
<html lang="en">
<head>
  <title>Test eel</title>
  <script type="text/javascript" src="/eel.js"></script>
  <script type="text/javascript" src="/myscript.js"></script>
</head>
<body>
  <h3 class='label_'>Num 1 </h3> 
  <input type="text" id="data_1"    >
  </br>
  <h3 class='label_'>Num 2 </h3>
  <input type="text" id="data_2" >
</br>
  <input type="button" class="submit" value="submit" onclick="sum()"></br>
output
<div id='file-name'>---</div>
</div>
</body>
</html>
Solution

  • You can use JavaScript callback function to pass the return value to html

    main.js

    function sum() {
  var a = document.getElementById("data_1").value;
  var b = document.getElementById("data_2").value;
  eel.sum(a, b)(callback); // change here
}

// add function as
function callback(c) {
  document.getElementById("data").value = c;
}

    In index.html add this below code to print result on html side

    index.html

    <div>
  Result : <input type="text" id="data" >
</div>