如何将Python变量传递至JavaScript实现随机图片展示

错误原因 #

你当前代码出现索引始终为0的问题，由三个错误共同导致：

• HTML的input标签未正确渲染后端传递的value变量，value=value的写法会将input值固定为字符串value，转为数字后就是0
• JavaScript中未定义myVariable变量就直接作为数组索引使用
• 图片渲染代码中多写了无对应起始标签的</a>，会导致DOM结构异常

修正步骤 #

1. 修正HTML input的变量渲染 #

将input标签的value属性改为模板变量语法，正确渲染后端传递的值：

<div class="print">{{value}} is passed.</div> 
<input value="{{value}}" type="number" id="myVariable"/>

2. 修正JavaScript逻辑 #

先获取input值并转为数字类型，再作为数组索引使用，同时删除多余的</a>标签：

<script type='text/javascript'>
// 获取input值并转为数字
const myVariable = Number(document.getElementById('myVariable').value)
alert(myVariable)
// 渲染图片和说明
document.write("<img src='" + images[myVariable] + "'/><p><span>"
                 + caption[myVariable] + "</span></p>");
</script>

可选优化方案 #

如果你不需要将该变量展示给用户或者提供修改入口，可以不用input做中转，直接在JavaScript中注入模板变量，写法更简洁：

<script type='text/javascript'>
// 直接在JS中渲染后端传递的变量
const myVariable = {{value}}
alert(myVariable)
document.write("<img src='" + images[myVariable] + "'/><p><span>"
                 + caption[myVariable] + "</span></p>");
</script>

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