绝对新手-第一个function问题
[英]Absolute newbie - first function question
问题描述
刚开始学习JS，对我的第一个function有疑问。
我正在尝试根据 h4 标签的文本内容的条件将图像叠加层添加到另一个图像。
我收到一个错误：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();
正如我所说，这是我的第一个 function - 我期待您的回复。
2 个解决方案
解决方案1
1 2020-06-13 04:01:33
这表明 querySelector 没有找到匹配h4.status的元素并返回null 。 然后下一行尝试访问textContent上的null并失败。
如果您的脚本位于文档的<head>中，它将在文档加载的 rest 之前执行，这将解释上述情况：当 querySelector 运行时， <h4>尚未在文档中。
您可以通过将脚本移动到正文末尾或在执行之前侦听DOMContentLoaded 事件来解决此问题。
解决方案2
0 2020-06-13 17:11:41
啊哈。 让它工作，我按照 Ray 的建议添加了事件监听器，并将 function 调用移动到事件监听器中，它可以工作。 感谢您的所有意见。 现在我需要想办法创建 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
测试地点： http://www.j2studio.com/grg3910/properties-for-rent/6121-louisiana-ave-new-port-richey-fl-34653
有关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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.