@vanya02900
Начинающий программист

Надо с помощью jQuery вывести ответ, логика пишется на Python. Что не так с кодом?

Написал небольшой код на Python (решение квадратных уравнений). Интерфейс создал с помощью HTML/CSS. Для вызова функции с питона использовал JavaScript, а для вывода ответа использовал jQuery. Дело в том что я ввожу данные, нажимаю "Вычислить" и... ничего... И я точно не знаю, что не так или я не так привязал Python к веб-интерфейсу или неправильно ввёл код для вывода ответа. На первом изображении показано как всё выглядит, на втором примерно что долдно выводить 5f3d9d9bac655386857099.png
5f3d9ef5d56e1271576588.png
HTML + JavaScript + jQuery
<!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:wght@300;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 не надо было в вопрос вставлять, но пусть будет)
Я в первые тут, так что могу неправильно сформулировать вопрос...
  • Вопрос задан
  • 269 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Drayde
Во первых, все это:
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;
}

заменить этим:
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;
}


Во вторых, все это:
# Входные данные
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)


переместить до
eel.start("discriminant.html" , size=(700, 700))

Потому, что логика должна идти, после инициализации
eel.init("web")
и до запуска сервера, который отдает страницу.

Вникайте в то, что используйте. В противном случае, бездумный копипаст мануалов ведет к такому хаосу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы