Why doesn't this PyScript code work as it should?

Question

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">&plus;</option>
<option value="Subtract">&minus;</option>
<option value="Multiply">&times;</option>
<option value="Divide">&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">&plus;</option>
<option value="Subtract">&minus;</option>
<option value="Multiply">&times;</option>
<option value="Divide">&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">&#8482; 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!

Asked By: wbohrer28

||

Source

Answer 1

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.

Answered By: Barmar

Why doesn't this PyScript code work as it should?

Question:

Answers: