你可以将图像的src改为Javascript中的变量吗？

嗯，我敢肯定你可以，除了我的代码现在失败了。
你可以将图像的src改为Javascript中的变量吗？

就是我要告诉我的短一点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方法，所以......

来源

2012-10-30 user1760745

将脚本代码移到加载事件或移动到主体的末尾... – Kasma

"I get the console error:Uncaught TypeError: Cannot set property 'src' of null "

这是因为document.getElementById('pie')返回null，因为它没有找到ID为'pie'的元素，因为你的脚本在浏览器解析相关元素之前运行。

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

将脚本块移到文档的末尾（例如，在关闭</body>标记之前）或将代码放入名为onload的函数中。这样你的图片元素将被解析，并可以从JS中操纵。

（您想设置.src一个变量的事实是没有问题的。）

来源

2012-10-30 06:34:10 nnnnnn

哦！我不能相信我错过了这一点。我犯了那么多错误。非常感谢。 – user1760745

对象“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来代替调试。

来源

2012-10-30 06:34:31 TheVillageIdiot

您的脚本失败，因为它位于文档的头部，并且在加载内容之前执行。把它放在体内，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>

来源

2012-10-30 06:35:31 Daedalus

这是不工作的原因是，在你的代码运行的时候，“馅饼”的元素尚未被解析并插入到DOM树呢。

您需要基本上延迟代码的执行，直到您要查找的DOM元素被完全解析为止，所以将'script'元素放在关闭“body”标签之前即可解决您的问题。

另外，你也可以绑定一个eventHandler来在解析DOM树时触发。我强烈建议与图书馆一起做这件事，以帮助克服所有跨浏览器问题。 jQuery是一种流行的解决方案，但如果您不希望在您的页面上包含大型库，this库可以提供帮助。

来源

2012-10-30 06:41:05

你可以将图像的src改为Javascript中的变量吗？

回答

相关问题