Javascript 循环交替图像源函数_Javascript

Javascript 循环交替图像源函数

javascript

Javascript 循环交替图像源函数,javascript,Javascript,我创建了一个工具，允许用户抓取YouTube视频的缩略图，尽管我遇到了一些循环问题。在输入视频的watch ID时，图像会显示，但是如果您随后在输入中重新输入另一个ID，则图像不会更改。如何更改代码以允许循环/多个图像抓取 <!doctype html> <html> <head> <title>Thumbnail Grabber</title> <script type="text/javascript">

我创建了一个工具，允许用户抓取YouTube视频的缩略图，尽管我遇到了一些循环问题。在输入视频的watch ID时，图像会显示，但是如果您随后在输入中重新输入另一个ID，则图像不会更改。如何更改代码以允许循环/多个图像抓取

<!doctype html>
<html>
<head>
    <title>Thumbnail Grabber</title>
    <script type="text/javascript">
    window.onload = function()
    {
        document.getElementById( 'inp' ).onkeyup = keyUp;
    }

    function keyUp()
    {
        var img = document.getElementById( 'image' );
        img.src = img.src.replace( /url=[^&]+/, this.value +'/maxresdefault.jpg' );
    }
    </script>
    </head>
    <body>
        <input type="text" id="inp">

        <img id="image" src="http://img.youtube.com/vi/url=example/">
    </body>


缩略图抓取器
window.onload=函数（）
{
document.getElementById（'inp'）。onkeyup=keyUp；
}
函数keyUp（）
{
var img=document.getElementById（'image'）；
img.src=img.src.replace（/url=[^&]+/，this.value+'/maxresdefault.jpg'）；
}

您的替代者也将删除

url=

部分。假设

此.value

为

“X”

，它会将

src

属性更改为

http://img.youtube.com/vi/X/maxresdefault.jpg

。在下一个keyup事件中，将不再有任何可替换的内容

另外，不要忘记用户输入

字符的情况

所以我建议

.replace（/url=[^&]+/，“url=“+encodeURIComponent（this.value+'/maxresdefault.jpg'））