使用HTML、CSS与PyScript实现股票SMA计算时参数输入及运行错误求助

各位好，我最近在用HTML、CSS搭配PyScript做一个股票简单移动平均线（SMA）的计算工具，页面布局已经搭得差不多了，但在运行PyScript逻辑的时候遇到了报错，折腾了半天没找到核心问题，想请大家帮忙看看。

项目概况 #

我做了一个带导航栏的交互页面，用户可以输入股票代码、起止日期和SMA计算的窗口天数，点击按钮触发SMA计算。目前页面样式和布局都能正常显示，但PyScript的计算逻辑一运行就报错。

完整代码展示 #

1. HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="https://pyscript.net/releases/2024.2.1/core.js"></script>
    <!--<link rel="stylesheet" href="https://pyscript.net/releases/2025.7.3/core.css" />-->
    <title>Simple Moving Average</title>
</head>
<body>
    <link rel="stylesheet" href="styleSMA.css">
    <!-- 这里注意：存在重复的body标签，我怀疑可能影响DOM元素获取 -->
    <body id="bodyWelcome" style="background-color: #b8e0fc;">
        <nav class="navbar">
            <ul>
                <img src="logo.png" id="logo">
                <li><a href="">About Us</a></li>
                <li><a href="">Sign In / Login</a></li>
                <li>
                    <div class="drop">
                        <button class="dropbtn">Stock Data</button>
                        <div class="drop-down">
                            <a href="">Ticker Symbol</a>
                            <a href="">Simple Moving Average</a>
                            <a href="">Exponential Moving Average</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="drop">
                        <button class="dropbtn">Visualize</button>
                        <div class="drop-down">
                            <a href="">Simple Moving Average</a>
                            <a href="">Exponential Moving Average</a>
                            <a href="">Bollinger's Band</a>
                            <a href="">Candlestick Graph</a>
                        </div>
                    </div>
                </li>
                <li><a href="">Home</a></li>
            </ul>
        </nav>
        <form >
            <label for="tickersym">Enter ticker symbol:</label>
            <input type="text" name="tickersym" id="tickersym">
            <br>
            <label for="start"> Enter start date:</label>
            <input type="datetime" name="start" id="start"><br>
            <label for="end">Enter end date:</label>
            <input type="datetime" name="end" id="end"><br>
            <label for="windtd">Enter number of trading days (window) for SMA:</label>
            <input type="number" name="windtd" id="windtd"><br>
            <button type="button" name="calculate" id="calculate">Calculate SMA</button>
            <button type="button" name="refresh" id="refresh">Refresh</button>
        </form>
        <py-script>
from pyodide import Element
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import yfinance as yf

# 这里获取元素的方式是不是有问题？直接拿element对象而不是值？
ticker = Element('tickersym').element
st= Element('start').element
en = Element('end').element
# 这里变量名写错了：ed应该是en？
df = yf.download(ticker,start=st,end=ed)
td = Element('windtd').element
# 这里有笔误：Aberage应该是Average
df['Simple Moving Aberage'] = df['Close'].rolling(window = td).mean()
print(df)
        </py-script>
    </body>
</html>

2. CSS样式代码 #

.navbar ul {
    list-style-type: none;
    background-color: #1e81d8;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
    margin-bottom: 0%;
}

a {
    color: white;
    text-decoration: none;
    padding: 15px;
    display: block;
    text-align: center;
    margin-bottom: 0%;
}

a:hover{
    background-color: #5f9cd1;
}

.navbar li {
    float: right;
}

#logo {
    margin: 0%;
    padding: 0%;
    height: 49px;
    margin-bottom: 0%;
    padding-bottom: 0%;
}

h1 {
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(20, 90, 123);
    padding-bottom: 0%;
    margin-bottom: 0%;
}

h5 {
    padding-top: 0%;
    color: rgb(20, 90, 123);
    text-align: center;
    margin-top: auto;
}

body {
    margin: 0%;
}

p {
    margin: 15px;
    color: rgba(4, 19, 26, 0.925);
}

.drop-down{
    overflow: hidden;
}

.drop .dropbtn{
    font-family: 'Times New Roman', Times, serif;
    float: none;
    padding: 16px;
    font-size: 16px;
    padding-bottom: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.drop-down a {
    display: none;
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.drop:hover .drop-down{
    display: block;
}

.dropbtn {
    padding: 16px;
    background-color: #1e81d8;
    border: none;
    color: white;
}

.drop-down {
    display: none;
    position: absolute;
    background-color: #2d75b0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropbtn:hover{
    background: #5f9cd1;
}

实际报错信息 #

运行后控制台输出的错误（内容有截断）：

Traceback (most recent call last):
  File "/lib/python311.zip/_pyodide/_base.py", line 501, in eval_code
    .run(globals, locals)
    ^^^^^^^^^^^^^^^^^^^^
File "/lib/python31

我自己排查到的疑似问题点 #

1. HTML结构错误：页面里写了两个<body>标签，会不会导致DOM元素查找异常？
2. PyScript元素取值错误：我直接用Element('tickersym').element获取输入框，是不是应该用.value来拿到用户输入的内容？
3. 变量名错误：PyScript里有两处明显笔误：
   • 调用yfinance时用了end=ed，但定义的变量是en；
   • 列名写了Simple Moving Aberage，正确应该是Average；
4. 事件绑定缺失：我没给“Calculate SMA”按钮绑定点击事件，是不是点击后代码根本没触发执行？
5. 参数类型不匹配：直接把DOM元素对象传给yf.download()和rolling(window=td)，是不是应该先转成字符串/数字类型？

这些问题我自己拿不准哪个是导致报错的核心原因，希望有经验的朋友帮我分析下，谢谢大家！

内容来源于stack exchange