Javascript 绝对新手-第一个函数问题

刚开始学习JS，对我的第一个函数有一个问题

我试图添加一个图像覆盖到另一个图像的基础上的h4标签的文本内容的条件

我收到一个错误：null不是计算“textStatus.textContent”的对象

const textStatus = document.querySelector('h4.status');
const statusText = textStatus.textContent;
const mainImage = document.querySelector('.main-image');

function statusSnipe(){
    if(statusText === "Rental Status: Rented"){
        mainImage.classList.add('rental-snipe-rented');
    };
};
statusSnipe();

---

正如我所说的，这是我的第一个函数-我期待着您的回复。

这表明querySelector没有找到与h4.status匹配的元素并返回。然后，下一行尝试访问空文本内容，但失败

如果脚本位于文档的末尾，它将在加载其余文档之前执行，这将解释上述场景：当querySelector运行时，文档中还没有脚本

---

您可以通过将脚本移动到正文的末尾或在执行之前先侦听一段时间来解决此问题。

Aha！让它发挥作用。我按照Ray的建议添加了事件监听器，并将函数调用移动到事件监听器中，它就可以工作了。谢谢你的所有意见。现在，我需要找到一种方法来创建if/else或switch语句，为可用和保留添加不同的图像覆盖

document.addEventListener'DOMContentLoaded'，=>{ const textStatus=document.querySelector'h4.status'； //const statusText=textStatus.textContent； const main image=document.querySelector'.main image'； 功能状态snipe{ iftextStatus.innerText==租赁状态：租赁{ main image.classList.add'rent-snipe-rented'； } else iftextStatus.innerText==租赁状态：暂停{ main image.classList.add'rental-snipe-hold'； }else{}； } 状态鹬； }; .main图像{位置：相对；} .租用鹬租赁：：之前{ 内容：； 背景图像：urlhttp://www.j2studio.com/grg3910/images/new-rented-snipe.png; 位置：绝对位置； 排名：0； 左：0； 背景重复：无重复； 宽度：100%； 身高：100%； z指数：9； } .租用鹬湾：：之前{ 内容：； 背景图像：urlhttp://www.j2studio.com/grg3910/images/on-hold-snipe.png; 位置：绝对位置； 排名：0； 左：0； 背景重复：无重复； 宽度：100%； 身高：100%； z指数：9； } .租赁状态文本{颜色：aaa；} 租赁状态：暂停 950美元/月宽敞的3居室/1浴室住宅-无地毯-更新厨房-内部实用设施-宠物友好型！ 有效日期：2020年5月14日 居住类型：单身家庭 卧室：3间 浴室：1间 平方英尺：1088 允许养宠物吗？有条件的 详情如下

---

请提供您的html代码。您好。。。欢迎来到这里。。。加入社区。。。你的文章标题最好能提到你真正需要的东西。如何做到这一点。。。。JS。。。有了这个，你可能会收到更快的反馈。。非常好。我知道这是第一个将图像覆盖到另一个元素上的函数，但这可以在CSS中使用绝对位置或背景url图像来完成。有什么原因需要在JS中完成吗？谢谢你的反馈。从现在开始，我将创建更好的主题行。实际上，我是通过css添加图像的——通过正在讨论的函数尝试向图像容器添加一个类。测试地点在这里：谢谢，雷。是的，在头部。所以我添加了下面的代码，它不会抛出任何错误，但就是不起作用document.addEventListener'DOMContentLoaded'，=>{const textStatus=document.querySelector'h4.status'；const statusText=textStatus.textContent；const mainImage=document.querySelector'.主图像'；函数状态键入{ifstatusText==Rent

---

al状态：可用{mainImage.classList.add'rent-snipe-rented'；}；}；}````在commentCheck中似乎无法正确格式化代码。它在事件侦听器中使用您的代码，并且可以正常工作。在此过程中，我添加了一些变量的控制台日志记录，但它是直接从您的示例中删除的。检查了您的小提琴，我在Safari和Chrome中发现了控制台错误。我在某一点上看到了短暂的红色闪烁，但我没有看到添加到主图像div中的类？我在评论后注意到，如果您点击run按钮，我的小提琴会运行，但在整个小提琴页面首次加载时会抛出一个错误。似乎在一个框架环境中尝试侦听加载事件可能会有问题，但我不能确定，我需要走出去一点。我回来后再登记。