It is necessary to display the answer using jQuery, the logic is written in Python. What's wrong with the code?

I

Ivan Kambur2020-08-19 21:18:15

css

Ivan Kambur, 2020-08-19 21:18:15

Wrote a small code in Python (solution of quadratic equations). Interface created using HTML/CSS. To call the function from python, I used JavaScript, and to display the response, I used jQuery. The fact is that I enter data, click "Calculate" and ... nothing ... And I don't know exactly what's wrong or I didn't bind Python to the web interface in the right way or entered the code incorrectly to display the answer. The first image shows what it looks like, the second image shows what

HTML + JavaScript + jQuery should output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Дискриминант</title>

  <script src="eel.js"></script>
  <link rel="icon" type="image/png" href="img/favicon.png">
  <link rel="stylesheet" type="text/css" href="CSS/discriminant.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500&display=swap">
</head>
<body>

  <!--Входные данные: a, b, c -->
  <div class="location">
    <input id="a" type="text" placeholder="a" required="" value="">
    <input id="b" type="text" placeholder="b" required="" value="">
    <input id="c" type="text" placeholder="c" required="" value="">
  </div>

  <!--Кнопка вычислить-->
  <button id="show">Вычислить</button><br><br>

  <!--Тут должен выводится ответ-->
  <div id ="info">x1=000 x2=111</div>

  <!--JavaScript код-->
  <script type="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">

    // JS код для вызова Python функции
    async function display_a()	{
      let a = document.getElementById('a').value;
    async function display_b()	{
      let b = document.getElementById('b').value;
    async function display_c()	{
      let c = document.getElementById('c').value;

      // Вызывает функцию get_D из Python кода
      let res = await eel.get_D(a, b, c)();
      document.getElementById('info').innerHTML = res;
    }
      // При клике на кнопку "Вычислить", должен выводить ответ
    jQuery('#show').on('click', function()) {
      display_a();
    }
  </script>
</body>
</html>

Python

from math import sqrt
import eel

# Веб-интерфейс приложения
eel.init("web")

eel.start("discriminant.html" , size=(700, 700))

# Входные данные
a = float(input("a = "))
b = float(input("b = "))
c = float(input("c = "))


@eel.expose

# Функция в которой решается уравнение
def get_D(a, b, c):

  D = b * b - 4 * a * c

  if D > 0:
    x1 = (-b - sqrt(D)) / (2 * a)
    x2 = (-b + sqrt(D)) / (2 * a)
    print("x1 = %.2f; x2 = %.2f" % (x1, x2))
  
  elif D == 0:
    x1 = -b / (2 * a)
    print("x1 = %.2f" % x1)

  else:
    print("Нет решения")
  
inf = get_D(a, b, c)

css

* {
  font-family: "Roboto", sans-serif;
}

body {
  background: rgb(255,240,9);
  background: rgb(244,171,0);
  background: -moz-linear-gradient(90deg, rgba(244,171,0,1) 0%, rgba(255,89,56,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(244,171,0,1) 0%, rgba(255,89,56,1) 100%);
  background: linear-gradient(90deg, rgba(244,171,0,1) 0%, rgba(255,89,56,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4ab00",endColorstr="#ff5938",GradientType=1);
  color: white;
}

.location {
  
}

#a {
  border: none;
  background: rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, 5);
  border-radius: 10px;
  padding: 20px;
  color: white;
  outline: none;
  width: 26%;
  font-size: 32px;
  font-weight: bold;
  margin: 0.43%;
}

#b {
  border: none;
  background: rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, 5);
  border-radius: 10px;
  padding: 20px;
  color: white;
  outline: none;
  width: 26%;
  font-size: 30px;
  font-weight: bold;
  margin: 0.43%;
}

#c {
  border: none;
  background: rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, 10);
  border-radius: 10px;
  padding: 20px;
  color: white;
  outline: none;
  width: 26%;
  font-size: 30px;
  font-weight: bold;
  margin: 0.43%;
}

#a::placeholder {
  color: rgba(255, 255, 255, .5);
}

#b::placeholder {
  color: rgba(255, 255, 255, .5);
}

#c::placeholder {
  color: rgba(255, 255, 255, .5);
}

#show {
  border: none;
  background: rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, 10);
  border-radius: 10px;
  padding: 20px;
  color: white;
  outline: none;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  background: rgb(255,143,69);
  background: -moz-linear-gradient(90deg, rgba(255,143,69,1) 0%, rgba(94,103,252,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(255,143,69,1) 0%, rgba(94,103,252,1) 100%);
  background: linear-gradient(90deg, rgba(255,143,69,1) 0%, rgba(94,103,252,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff8f45",endColorstr="#5e67fc",GradientType=1);
  margin-top: 15px;
  text-transform: uppercase;
  cursor: pointer;
}

#show:hover {
  opacity: .9
}

CSS should not have been inserted into the question, but let it be)
I'm the first here, so I can formulate the question incorrectly ...

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Edward, 2020-08-20
@Drayde

First, all this:

async function display_a() {
let a = document.getElementById('a').value;
async function display_b() {
let b = document.getElementById('b').value;
async function display_c() {
let c = document.getElementById('c').value;
// Calls the get_D function from Python code
let res = await eel.get_D(a, b, c)();
document.getElementById('info').innerHTML = res;
}

replace with this:

async function display_a()
{
      let a = document.getElementById('a').value;
      let b = document.getElementById('b').value;
      let c = document.getElementById('c').value;

      // Вызывает функцию get_D из Python кода
      let res = await eel.get_D(a, b, c)();
      document.getElementById('info').innerHTML = res;
}

Secondly, all this:

# Input data
a = float(input("a = "))
b = float(input("b = "))
c = float(input("c = "))
@eel.expose
# Function that solves the equation
def get_D(a, b, c):
D = b * b - 4 * a * c
if D > 0:
x1 = (-b - sqrt(D)) / (2 * a)
x2 = (-b + sqrt( D)) / (2 * a)
print("x1 = %.2f; x2 = %.2f" % (x1, x2))
elif D == 0:
x1 = -b / (2 * a)
print(" x1 = %.2f" % x1)
else:
print("No solution")
inf = get_D(a, b, c)

move up

eel.start("discriminant.html" , size=(700, 700))

Because the logic should go after initialization

eel.init("web")

and before starting the server that gives the page.
Understand what you are using. Otherwise, thoughtless copy-paste of manuals leads to such chaos.