Javascript TypeError:无法读取属性'；src&x27；在XMLHttpRequest.xhr.onreadystatechange处为null

您好，我是一名网络开发新手，我正在尝试点击一个随机图像url生成器API，并尝试在屏幕上显示图像。 我从API获得响应，但在将url传递给img变量时，我得到了类型错误：无法读取XMLHttpRequest.xhr.onreadystatechange处null的属性“src”

var btn=document.querySelector（“#btn”）；
var img=document.querySelector（“照片”）；
函数c（）{
var xhr=new XMLHttpRequest（），
method=“GET”，
url=”https://dog.ceo/api/breeds/image/random";
open（方法、url、true）；
xhr.onreadystatechange=异步函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
var url=JSON.parse（xhr.responseText）.message；
img.src==url；
}
};
xhr.send（）；
}
欢迎使用狗狗照片应用程序

您执行了

var img=document.querySelector（“#photo”）。（它在JS代码下面定义

将
btn
和
img
的声明移动到
function c（）{…}
中将解决您的问题，因为所有HTML元素都将存在

函数c（）{
//这里添加了声明
var btn=document.querySelector（“#btn”）；
var img=document.querySelector（“照片”）；
//代码的其余部分
var xhr=new XMLHttpRequest（），
// ...
您键入的

img.src == url;

如果要将
url
的值分配给
img.src
，请只使用一个
=
符号。
=
意味着检查
img.src
和
url
的值是否相同。@HeySora的答案也是相关的；您需要在html元素存在后运行脚本。


函数c（）{
var btn=document.querySelector（“#btn”）；
var img=document.querySelector（“照片”）；
var xhr=new XMLHttpRequest（），
method=“GET”，
url=”https://dog.ceo/api/breeds/image/random";
open（方法、url、true）；
xhr.onreadystatechange=异步函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
var url=JSON.parse（xhr.responseText）.message；
img.src=url；
}
};
xhr.send（）；
}
欢迎使用狗狗照片应用程序


尝试过，但仍然收到相同的错误尝试过，但现在得到：Dog app.html:1未经检查的运行时。lastError:在收到响应之前，消息端口已关闭。