Question

如何在HTML里面用Javascript根据用户输入，随机显示图片？

/*用户输入*/
<input type="text" id="index">
<button type="button" onclick="Random_Digimon()">submit</button>
<p>Enter you name, and summon you digimon</p>

/*显示图片*/

<script>
function Digimon() {
var i = document.getElementById("index").length;
var Images = new Array(3);
Images[0]='D:\IT\Unit 28\New HTML\Metrial\Image1.png'
Images[1]='D:\IT\Unit 28\New HTML\Metrial\Image2.png'
Images[2]='D:\IT\Unit 28\New HTML\Metrial\Image3.png'

if (i.length > 4){
document.write(images[Math.floor(Math.random()*3)])

} else {
alert ('lol_lack of luck')

</script>

PS：QvQ，偶想要的效果是根据输入的字符长度，随机显示三个图片之一，输入长度短于4则提醒运气不好。为啥它就是不工作。。。。我怎么点按钮，什么都没发生。。。学渣求完善，给跪了！~~(>_<)~~
新代码：

<script>
function Digimon() {
var i = document.getElementById("index").value.length;
var Images = new Array(2);
Images[0]='D:\IT\Unit 28\New HTML\Metrial\Image1.png'
Images[1]='D:\IT\Unit 28\New HTML\Metrial\Image2.png'
Images[2]='D:\IT\Unit 28\New HTML\Metrial\Image3.png'

if (i > 4){
document.write(Images[Math.floor(Math.random()*3)])
}

}
</script>

Answer 1

1、你在声明 i 的时候，已经使用了 length，所以你 if 的时候不需要使用了，否则会出错
2、length 应该是针对内容的，而你是直接对某ID的对象获取
应该是 ID.value.length 或 ID.innerText.length

最后，随机数有产生 0 的情况，你实际得到的数字会是 0~3 这个区间
如果你不带 0 这个图片，那你需要增加一层判断，为 0 时 +1

追问

另外，又有个问题，我输入超过4的字符长度后
页面只显示了D:ITUnit 28New HTMLMetrialImage3.png 这段字符。
请问为什么图片无法显示？是我储存图片的变量的问题吗？

PS：ID.value.length 好用，谢谢！

追答

从你追加的代码中并没看出问题
你可以尝试增加图片数量以及随机数大小，3以内的随机数重复的可能性极大。
另外，也可能是你刷新时的缓存问题