如何在HTML文本输入框的placeholder中显示指定JS数组元素

实现方法 #

你无法直接在HTML标签的属性内插入JS变量，需要通过JS动态给input元素的placeholder属性赋值，具体实现代码如下：

完整示例代码 #

<!-- 原有HTML结构，placeholder留空即可 -->
<input type="text" id="inputss" name="S1_C1" value="" placeholder="">
<button style="display:none;" id="myButton" onclick="UpdateValues('inputss')">Submit</button>

<script>
var Students_C1 = [45,0,0,0,0];

// 等待页面DOM加载完成后执行赋值逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标input元素
  const targetInput = document.getElementById('inputss');
  // 数组索引从0开始，第一个元素45对应下标0，赋值给placeholder
  targetInput.placeholder = Students_C1[0];
})
</script>

注意事项 #

• JS数组的索引从0开始计数，你要取的45是数组的第一个元素，对应取值写法为Students_C1[0]
• 如果你的JS代码放在HTML文件的</body>标签之前，也可以省略DOMContentLoaded监听，直接写赋值逻辑，此时DOM已经渲染完成，不会出现找不到元素的问题。

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