绝对新手-第一个function问题
[英]Absolute newbie - first function question
问题描述
Just started learning JS and have a question on my first function.
刚开始学习JS，对我的第一个function有疑问。
I am trying to add an image overlay to another image based on the condition of the text content of an h4 tag.我正在尝试根据 h4 标签的文本内容的条件将图像叠加层添加到另一个图像。
I am getting an error: null is not an object (evaluating 'textStatus.textContent')我收到一个错误：null 不是 object（正在评估“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();
As I said this is my first function - I look forward to your replies.正如我所说，这是我的第一个 function - 我期待您的回复。
2 个解决方案
解决方案1
1 2020-06-13 04:01:33
This indicates that the querySelector didn't find an element matching h4.status and returned null .这表明 querySelector 没有找到匹配h4.status的元素并返回null 。 The next line then attempts to access textContent on null and fails.然后下一行尝试访问textContent上的null并失败。
If your script is in the <head> of the document it will execute before the rest of your document loads, which would account for the scenario described above: When the querySelector runs, the <h4> isn't in the document yet.如果您的脚本位于文档的<head>中，它将在文档加载的 rest 之前执行，这将解释上述情况：当 querySelector 运行时， <h4>尚未在文档中。
You could fix this by moving your script to the end of the body or by listening for a DOMContentLoaded event before executing.您可以通过将脚本移动到正文末尾或在执行之前侦听DOMContentLoaded 事件来解决此问题。
解决方案2
0 2020-06-13 17:11:41
Aha.啊哈。 Got it to work, I added the event listener as Ray suggested, and moved the function invoke to within the event listener and it works.让它工作，我按照 Ray 的建议添加了事件监听器，并将 function 调用移动到事件监听器中，它可以工作。 Thank you for all your input.感谢您的所有意见。 Now I need to figure a way to create if/else or switch statements to add different image overlays for "Available" and "On Hold".现在我需要想办法创建 if/else 或 switch 语句来为“可用”和“等待”添加不同的图像覆盖。
document.addEventListener('DOMContentLoaded', () => { const textStatus = document.querySelector('h4.status'); // const statusText = textStatus.textContent; const mainImage = document.querySelector('.main-image'); function statusSnipe(){ if(textStatus.innerText === "Rental Status: Rented"){ mainImage.classList.add('rental-snipe-rented'); } else if(textStatus.innerText === "Rental Status: On Hold"){ mainImage.classList.add('rental-snipe-hold'); } else {}; } statusSnipe(); });
.main-image {position: relative;}.rental-snipe-rented::before { content: ''; background-image: url("http://www.j2studio.com/grg3910/images/new-rented-snipe.png"); position: absolute; top: 0; left: 0; background-repeat: no-repeat; width: 100%; height: 100%; z-index:9; }.rental-snipe-hold::before { content: ''; background-image: url("http://www.j2studio.com/grg3910/images/on-hold-snipe.png"); position: absolute; top: 0; left: 0; background-repeat: no-repeat; width: 100%; height: 100%; z-index:9; }.rental-status-text {color: #aaa;}
<div class="tm-grid-expand uk-grid-margin uk-grid" uk-grid=""> <div class="uk-width-2-3@m uk-first-column"> <div data-id="template-rWLyq4-M#0-1-0-1" class="main-image uk-margin uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <img class="el-image uk-box-shadow-large" alt="" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/Living1-76731dac.jpeg"> </div> </div> <div class="uk-width-1-3@m"> <h4 class="status uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-0" uk-scrollspy-class="" style=""> <span class="rental-status-text">Rental Status: </span>On Hold </h4> <h2 class="uk-h2 uk-margin-remove-vertical uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-1" uk-scrollspy-class="" style=""> <sup>$</sup>950<sup>/mth</sup> </h2><div class="uk-margin uk-width-medium@m uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-2" uk-scrollspy-class="" style="">Spacious 3 Bedroom/1 Bathroom Home - No Carpet - Updated Kitchen - Inside Utility - Pet Friendly:</div> <div data-id="template-rWLyq4-M#0-1-1-3" class="uk-margin"> <div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@xl uk-grid-row-small uk-grid-match uk-grid uk-grid-stack" uk-grid=""> <div class="uk-first-column"> <div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <div class="el-content uk-panel uk-margin-top"><svg id="f5c2a82f-a8ae-474e-9bef-87f89d00969d" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="af4b105e-d1a5-49c8-ba95-4c7b70b26c69" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="aadd5cd5-ccc4-4f5c-b030-67875e2a080b" data-name="Layer 3"><path d="M9,49.22.52h7.78l.38-.55-.54-.38V19.9H9.49v-.75h7.66v-.44l3.69-4.87V7.32H18.48V8.46h-.76V7.32h-2V8.46H15V7.32H13V8.46h-.76V7.32h-2V8.46H9.53V7.32H7.16v18.5H20,85V22l-2..79-.54-.38-.61.87H9.49Zm11-1.18-1.53.6-1.05-.74V19.56l2,55.1.78Zm-2.37-2,58.5.64-7,46.2,5.1.76-5,07.7.85Zm6.13-8L26,6.12.4a1,69.1,69,0,0.0-.29-2,14.1,71.1,71,0,0.0-2.1,46ZM27.13.28l-5,37.8.31v5H6.4v-20H9.53V5.42h.76V6.56h2V5.42H13V6.56h2V5.42h.76V6.56h2V5.42h.76V6.56h3.13v6.27l1.64-2.16c.8-1,07.2.26-1,89.3,5-1s1.2.54,23.3.64ZM16,71.14,43.16,27.14v2.51H11.74V14l-.43.41-.52-,55.3-2.76.26-.24.26,24,3.2.76-.52.55Zm-1.19-1.11v2.45h-3V13,32L14.11:91Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Date Available:</strong> 14 May 2020</div> </div></div> <div class="uk-grid-margin uk-first-column"> <div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <div class="el-content uk-panel uk-margin-top"><svg id="b83822a7-14c4-449a-bffa-a9b54d2aca77" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="bf7f72a3-79a5-4e4b-bc33-1c2a0d18bd51" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="af72ee32-b475-4a80-9f1f-4041cb45286d" data-name="Layer 1"><path d="M10,32.17.41H7.81v2.51h2.51Zm17.45-4.27V22.8H18.09V16.57H13.91V22.8H4.23V13.14H12l4-4,28,4.4.28ZM4,59.12,3h7L16.7.64l4,39.4.66h7L21,18.5.2H10,81Zm24..09V23.64H17.25V17.41h-2.5v6.23H3.39V12.39l7-8H21.56l7,05.8Zm-4,42.5H21.68V19.9h2.51V17.41Zm.84-.84H20.84v4.19H25V16.55Zm-13,87.0v4.19H7V16:57Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Residence Type: </strong>Single Family</div> </div></div> <div class="uk-grid-margin uk-first-column"> <div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <div class="el-content uk-panel uk-margin-top"><svg xmlns="http.//www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="a926b529-8e3b-4a85-b852-f16bccf15968" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="f1687f64-ca8f-4abb-9535-fab97947c724" data-name="Layer 1"><path d="M22,64.13,27a5,5,0,0.0-3.13-,87,5,5,0,0.0-3.13.87v.46h6.26v-.46Zm4,14.9.42H5.23v1.68H4.46v-5.1L8,59.14V7.63h.77V9.17H22.64V7.63h.77V14l4,13.5.28v5.1h-.76V22.69ZM5,23.21.93H26.78V19.78H5.23v2.15Zm10.39-8.2v-,46a5,5,0,0.0-3.13-,87,5,5,0,0.0-3.13.87v.46ZM26,37,19.22,84.14.5H9.16L5,63.19ZM22,64.9.94v2.4a6,57.6,57,0,0.0-3.13-,7.6,08.6,08,0,0.0-3.51,95.6,08.6,08,0,0.0-3.51-,95.6,57.6,57,0,0.0-3.13.7V9:94Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Bedrooms: </strong>3</div> </div></div> <div class="uk-grid-margin uk-first-column"> <div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <div class="el-content uk-panel uk-margin-top"><svg id="aacfd61b-f492-4e96-b3c7-9594675cd011" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="ec7019f1-cb29-4191-8955-9e1cf3b7e618" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="bacb411f-8d14-4e9e-af06-8af666522762" data-name="Layer 4"><path d="M5,88.15,27.11,36,17a18,18,0,0,0.5.78.89h9.6l-.09,45-1.4.78a2,88.2,88,0,0.1-2,87.2.54h-.66l,61.1.39-.68.3-.74-1.69H11.39l-,74.1.69-.69-.3.61-1.39H9.92A2,89.2,89,0,0,1,7.23.16L5,4.15.7l-.14-.63Zm6.48-4.94h-.75v5h.75Zm2,69.1H14.3v4.55h.75V11.33Zm2,69.0H17V16h.74V11.33Zm2.7-1h-.75v5.73h.75Zm-4-7.72V6.5h6.23v.75H20.74A4,55.4,55,0,0,1,19.9,07a6,6,0,0,1-6,0.4,5.4,5,0,0.1-1.72-1.82H9.41V6.5h6.24V2.61Zm3,48.4.64H12.17a3,81.3,81,0,0,0.1,25.1,18.5,2.5,2,0,0,0.5,21,0.3,81.3,81,0,0,0.1.25-1.18Zm-8,74.10.5L6,27.16,18.7,77.23a2,15.2,15,0,0,0.2,15.2H22.78a2,13.2,13,0,0,0.2.14-2l.9-4.34H17.14a19,07.19,07,0,0.1-6-:91Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Bathrooms: </strong>1</div> </div></div> <div class="uk-grid-margin uk-first-column"> <div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <div class="el-content uk-panel uk-margin-top"><svg id="f66d02d0-648e-4973-b0d6-03149c0e4a34" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="b586850a-7579-41cd-85fe-2df77250fb87" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="a5c19eb4-9dd9-4d22-976a-05512768b0ac" data-name="Layer 1"><path d="M6,05.5.63H26.37V26.37H5.63V5.63ZM25,52.19.79H13.32v5.73h12,2Zm-13.0h-6v5.73h6Zm-6-.85h19V13.06h-19Zm0-6.73h12.2V6.48H6.48v5.73Zm13,05.0h6V6:48h-6Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong> Square Feet: </strong>1088</div> </div></div> <div class="uk-grid-margin uk-first-column"> <div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <div class="el-content uk-panel uk-margin-top"><svg id="b59345cd-3c40-4504-a86e-a520304b6ed6" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="b7e5b9e6-f457-499e-893b-2e586346f98b" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="a41873e6-b1f3-47ac-8451-f911d2ed1890" data-name="Layer 3"><path d="M9,3.13.94a6,58.6,58,0,0.1-1.77-3,18.10,07.10,07,0,0.1-.12-4.37l.1-,51L8.6.11l2,47.1.25a4,68.4,68,0,0,1.3,09,0L16.6.11l.46-.23.09.51a10,41.10,41,0,0,1.,15.2,84.9,22.9,22,0,0.1-,57.2,48.15,33.15,33,0,0,0.2,67.4.07c1,94.2,37.3,95.4,82.3,7.9,19,3-3.1.55-6.45.19-9.77a15,54.15,54,0,0.1-1.54-5.58h.77a15,25.15,25,0,0,0.1,48.5.29c1,55.3,78.3,15.7,69-1.11.21H7v-.47c0-,76.0-2,89.2.33-3.23V13.94Zm-1-3.38A5,69.5,69,0,0,0,10.13.47l.14.12v9.54H9,74a2,2,0,0,0-2,2.1,48.1,48,0,0,0,0..21h14c.38-4.35-1.59-6.76-3.5-9.08a15,72.15,72,0,0.1-2.86-4.43l-.05-.14.06-.14A8,32.8,32,0,0,0,16.9,14.9,6.9,6,0,0,0.15,87.7L13,72.8.12l-.15.08-.16-,06A4,4,0,0,0,12.7,87a4,4,0,0.0-1.44.27l-.16.06-.15-.08L8,09.7a9,08.9,08,0,0,0.,18.3?56Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Pets Allowed. </strong>conditional</div> </div></div> </div> </div> <div data-id="template-rWLyq4-M#0-1-1-4" class="uk-margin uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style=""> <a class="el-content uk-button uk-button-default" title="Apply now:" href="/grg3910/rental-application"> <span uk-icon="pencil" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http.//www.w3.org/2000/svg" data-svg="pencil"><path fill="none" stroke="#000" d="M17,25.6.01 L7,12.16.1 L3,82.17.2 L5,02.13.9 L15,12.3.88 C15,71.3.29 16,66.3.29 17,25.3.88 C17,83.4.47 17,83.5.42 17,25.6.01 L17,25.6.01 Z"></path><path fill="none" stroke="#000" d="M15,98.7.268 L13,851.5:148"></path></svg></span> <span class="uk-text-middle">Apply Now;</span> </a> </div> <div class="uk-margin-remove-vertical uk-text-center uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-5" uk-scrollspy-class="" style="">More Details Below</div><div data-id="template-rWLyq4-M#0-1-1-6" class="detailsbutton uk-margin-remove-vertical uk-text-center uk-scrollspy-inview uk-animation-scale-up" uk-scrollspy-class="uk-animation-scale-up" style=""><a class="uk-icon-link uk-icon" uk-icon="icon: chevron-down; width: 40." href="#details" uk-scroll=""><svg width="40" viewBox="0 0 20 20" xmlns="http.//www.w3.org/2000/svg" data-svg="chevron-down"><polyline fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg></a></div> </div> </div>
r r
test site: http://www.j2studio.com/grg3910/properties-for-rent/6121-louisiana-ave-new-port-richey-fl-34653测试地点： http://www.j2studio.com/grg3910/properties-for-rent/6121-louisiana-ave-new-port-richey-fl-34653
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
javascript函数文档新手问题 - javascript function documentation newbie question
JavaScript删除功能不起作用（绝对是新手） - JavaScript delete-function does not work (absolute Newbie)
简单的Javascript游戏，重复功能。 （新手问题） - simple Javascript game, repeat function. (newbie question)
有关document.addEventListener（'mousemove'，function（e）{ - Newbie question about document.addEventListener('mousemove', function (e) {
如何在异步 function 中使用 while 循环 - 新手问题 - How to use while loop inside an async function - newbie question
新手问题：我的 function 变量没有改变 - Newbie question: my function variables aren't changing
Javascript新手问题 - Javascript newbie question
DHTML新手问题 - DHTML newbie question
另一个JS新手问题 - Yet another JS newbie question
关于电子表格和工作表的新手问题 - Newbie question about Spreadsheet and Sheet
相关标签