I was creating a calculator PyScript program for a school project when the script stopped working as it should. I had to use the alpha PyScript to even make a working calculator for some reason, if that matters.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculators | EZMath</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/pyscript.css" />
<link rel="stylesheet" href="css/styles.css">
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div class="topbar">
<a href="index.html"><img class="topbarIcon" src="images/favicon.ico" alt="EZMath"></a>
<a href="index.html" class="iconSideText">EZMath</a>
<a href="about.html" class="topbarLink">About</a>
<a href="changelog.html" class="topbarLink">Changelog</a>
<a href="calculators.html" class="topbarLink">Calculators</a>
</div>
<div class="header">
<img src="images/header.jpg" alt="Math Homework" class="header">
<div class="header-centered">Calculators</div>
</div>
<div class="basicIntCalc">
<h3>Basic Integer Calculator</h3>
<form onsubmit="return false">
<input type="number" id="basicIntCalc1"/>
<select id="basicIntCalcOperator">
<option value="Add">+</option>
<option value="Subtract">−</option>
<option value="Multiply">×</option>
<option value="Divide">÷</option>
</select>
<input type="number" id="basicIntCalc2"/>
<button id="submit-button" type="submit" pys-onClick="basicIntCalc">Solve</button>
</form>
<p><b>Answer: </b><label id="basicIntCalcOutput">N/A</label></p>
</div>
<div class="basicDecCalc">
<h3>Basic Decimal Calculator</h3>
<form onsubmit="return false">
<input type="number" id="basicDecCalc1"/>
<select id="basicDecCalcOperator">
<option value="Add">+</option>
<option value="Subtract">−</option>
<option value="Multiply">×</option>
<option value="Divide">÷</option>
</select>
<input type="number" id="basicDecCalc2"/>
<button id="submit-button" type="submit" pys-onClick="basicDecCalc">Solve</button>
</form>
<p><b>Answer: </b><label id="basicDecCalcOutput">N/A</label></p>
</div>
<div class="submitCalc">
<h3>Submit a calculator suggestion today!</h3>
<br>
<a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSeaDHfBJBsTyuQbyaKWdiRkI-h4IkvKwpbCkOTgxc-Cf1YLDA/viewform">Form</a>
<br><br>
</div>
<div class="footer">
<div class="trademark">™ 2023 William Bohrer. All rights reserved.</div>
</div>
<py-script>
from fractions import Fraction
def basicIntCalc(*args, **kwargs):
num1 = int(Element("basicIntCalc1").element.value)
num2 = int(Element("basicIntCalc2").element.value)
operator = Element("basicIntCalcOperator").element.value
if operator == "Add":
output = num1 + num2
pyscript.write("basicIntCalcOutput", output)
elif operator == "Subtract":
output = num1 - num2
pyscript.write("basicIntCalcOutput", output)
elif operator == "Multiply":
output = num1 * num2
pyscript.write("basicIntCalcOutput", output)
else:
output = num1 / num2
pyscript.write("basicIntCalcOutput", output)
def basicDecCalc(*args, **kwargs):
num1 = float(Element("basicDecCalc1").element.value)
num2 = float(Element("basicDecCalc2").element.value)
operator = Element("basicDecCalcOperator").element.value
if operator == "Add":
output = num1 + num2
pyscript.write("basicDecCalcOutput", output)
elif operator == "Subtract":
output = num1 - num2
pyscript.write("basicDecCalcOutput", output)
elif operator == "Multiply":
output = num1 * num2
pyscript.write("basicDecCalcOutput", output)
else:
output = num1 / num2
pyscript.write("basicDecCalcOutput", output)
</py-script>
</body>
</html>
I define 2 functions that make each calculator work (I currently have 2 calculators), and call them each when you press a submit button. However, the second calculator button doesn't work. The first calculator button makes both of them work. For example, if I put 2.1 and 4.3 into the second calculator and press the second button, it doesn't work. But it does work if I press the first button instead, which should only make the first calculator work.
My apologies if this is a dumb question, I am a beginner with PyScript and Python in general.
Thanks!
IDs are required to be unique. I guess the PyScript transpiler is turning
<button id="buttonid" type="submit" pys-onClick="functioName">Solve</button>
into JavaScript like:
document.getElementById("buttonid").addEventListener("click", functionName);
Since you used the same ID submit-button for both buttons, this is adding both event listeners to the first button with that ID.
Give the buttons different IDs to fix it.