Question

嗯，我很确定你可以，除了我的代码现在失败了。

我告诉我的简短的小Javascript程序要做的是，从数组中选择一个代码（我现在测试一个，0，预设），并使用该代码获取该视频代码的Youtube缩略图，用于制作半自动Youtube图库，这意味着我无需进入，并手动执行所有繁琐的工作，只需转到视频并复制代码进入数组，但是，当我尝试通过document.getelementblahblah.src=myVar将图像的src更改为url（变量）时，我收到控制台错误： Uncaught TypeError: Cannot set property 'src' of null

这是我的代码：

<!Doctype HTML>
<html>
<head>
<script>
var thumbPrefix = "http://img.youtube.com/vi/";
var thumbSuffix = "/mqdefault.jpg";
var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
document.write(thumb1Url); //this is just to visualize url
document.getElementById('pie').src=thumb1Url;
</script>
</head>
<body>
<img src="" id="pie" />
</body>
</html>

而且，我也尝试过setAttribute方法，所以......

Answer 1

“我收到了控制台错误： Uncaught TypeError: Cannot set property 'src' of null”

那是因为document.getElementById('pie')已返回null，因为它找不到标识为'pie'的元素，因为您的脚本在浏览器解析了相关元素之前就已运行。< / p>

浏览器在遇到脚本块时会运行代码 - 从文档中自上而下。

将脚本块移动到文档的末尾（例如，在结束</body>标记之前）或将代码放在名为onload的函数中。这样你的图像元素就会被解析，并且可以从JS中进行操作。

（您尝试将.src设置为变量的事实根本不是问题。）

Answer 2

当您尝试设置其来源时，对象“pie”不存在。该脚本在浏览器遇到时被解析和执行。在您的页面中，脚本首先出现，图像标记稍后出现。您可以按如下方式更正

<!Doctype HTML>
<html>
<head>
<script>
function setImage(){
    var thumbPrefix = "http://img.youtube.com/vi/";
    var thumbSuffix = "/mqdefault.jpg";
    var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
    var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
    //document.write(thumb1Url); THIS IS CAUSING DOCUMENT TO CLEAR OF ALL MARKUP :(
    document.getElementById('pie').src=thumb1Url;
}
</script>
</head>
<body onLoad='setImage'>
<img src="" id="pie" />
</body>
</html>

document.write(thumb1Url)也导致了问题。请尝试使用Console.log进行调试。

Answer 3

您的脚本失败，因为它位于文档的头部，并在加载内容之前执行。把它放在身体like this中，它可以正常工作。

<body>

    <img src="" id="pie" />
    <script>
        var thumbPrefix = "http://img.youtube.com/vi/";
        var thumbSuffix = "/mqdefault.jpg";
        var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
        var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
        document.write(thumb1Url); //this is just to visualize url
        document.getElementById('pie').src=thumb1Url;
    </script>
</body>

Answer 4

这不起作用的原因是，在运行代码时，'pie'元素尚未被解析并插入到DOM树中。

您需要从根本上延迟代码的执行，直到您正在寻找的DOM元素被完全解析，因此将'script'元素放在关闭'body'标记之前将解决您的问题。

或者，您也可以绑定一个eventHandler，以便在解析DOM树时触发。我强烈建议您使用库来执行此操作，以帮助克服所有跨浏览器问题。 jQuery是一种流行的解决方案，但如果您不希望在您的网页上添加大型图书馆，this图书馆可以提供帮助。

你能在Javascript中将图像的src更改为变量吗？

4 个答案: