Python循环内嵌JavaScript循环未正确迭代值问题

我有一个日期列表，想要通过Python循环遍历生成对应的按钮元素：

df2 = ['Sat Nov 12 11:57:21 CST 2022',
 'Wed Nov 23 18:13:31 CST 2022',
 'Wed Nov 23 18:13:32 CST 2022',
 'Thu Nov 10 19:07:50 CST 2022',
 'Fri Nov 11 09:54:54 CST 2022',
 'Fri Nov 11 10:18:36 CST 2022',
 'Sat Nov 26 10:50:05 CST 2022',
 'Sat Nov 12 11:57:50 CST 2022']

目前Python循环中的value变量能正常迭代，但内嵌的JavaScript循环生成的按钮始终显示列表的最后一个日期值，按钮可以正常生成但内容不对，我的代码如下：

for count, value in enumerate(df2):
    counts = str(count)
    f.write(''' 
            <html>
               <head> 
                  <meta name="viewport" content="width=device-width, initial-scale=1"> 
               </head> 
               <body> 
                  <div id="myHTMLWrapper"> 
                  '''+value+'''
                  </div>
                  <script>
              var wrapper = document.getElementById("myHTMLWrapper");
              var myHTML = '';
              for (var i = 0; i < '''+counts+'''; i++) {
                myHTML += '<button class="test">'''+value+'''</button>';
              }
              wrapper.innerHTML = myHTML

                  </script>  
               </body>
            </html>
            ''')

问题原因 #

1. 代码逻辑错误：Python循环每次都会生成一个完整的HTML文档，且JavaScript循环的次数是当前元素的索引值count，每次拼接按钮时用的都是当前Python循环的value。当循环到列表最后一个元素时，count=7，JS会循环7次，每次都用最后一个日期生成按钮，最终看到的自然都是最后一个日期的按钮。
2. 完全没必要用JS循环生成按钮，直接通过Python遍历列表生成按钮元素更简单可靠。

解决方案 #

方案一：直接用Python生成按钮（推荐） #

直接通过Python循环日期列表，逐个生成按钮元素，无需内嵌JS循环：

df2 = ['Sat Nov 12 11:57:21 CST 2022',
 'Wed Nov 23 18:13:31 CST 2022',
 'Wed Nov 23 18:13:32 CST 2022',
 'Thu Nov 10 19:07:50 CST 2022',
 'Fri Nov 11 09:54:54 CST 2022',
 'Fri Nov 11 10:18:36 CST 2022',
 'Sat Nov 26 10:50:05 CST 2022',
 'Sat Nov 12 11:57:50 CST 2022']

# 写入HTML头部
f.write('''
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myHTMLWrapper">
''')

# 遍历日期生成按钮
for date in df2:
    f.write(f'<button class="test">{date}</button>')

# 写入HTML尾部
f.write('''
</div>
</body>
</html>
''')

方案二：通过Python传递日期列表给JS生成按钮（如果一定要用JS） #

把Python的日期列表转为JSON格式传递给JS，再由JS遍历生成按钮：

import json

df2 = ['Sat Nov 12 11:57:21 CST 2022',
 'Wed Nov 23 18:13:31 CST 2022',
 'Wed Nov 23 18:13:32 CST 2022',
 'Thu Nov 10 19:07:50 CST 2022',
 'Fri Nov 11 09:54:54 CST 2022',
 'Fri Nov 11 10:18:36 CST 2022',
 'Sat Nov 26 10:50:05 CST 2022',
 'Sat Nov 12 11:57:50 CST 2022']

# 将日期列表转为JSON字符串
dates_json = json.dumps(df2)

f.write(f'''
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myHTMLWrapper"></div>
<script>
var wrapper = document.getElementById("myHTMLWrapper");
var dates = {dates_json};
var myHTML = '';
for (var i = 0; i < dates.length; i++) {{
    myHTML += '<button class="test">' + dates[i] + '</button>';
}}
wrapper.innerHTML = myHTML;
</script>
</body>
</html>
''')

内容的提问来源于stack exchange，提问作者pdangelo4