admin管理员组文章数量:1332395
I'm trying to replicate the following codefor my react project, but it is throwing me the error "Type Error: Cannot read property 'query Selector' of undefined". Here is a Screenshot of the error. Suggest me where should i correct to make my code run.
I also would like to know how to use JavaScript externally or internally in Reactjs.
let mainPosts = document.querySelectorAll(".main-post");
let posts = document.querySelectorAll(".post");
let i = 0;
let postIndex = 0;
let currentPost = posts[postIndex];
let currentMainPost = mainPosts[postIndex];
let progressInterval = setInterval(progress, 100); // 180
function progress() {
if (i === 100) {
i = -5;
// reset progress bar
currentPost.querySelector(".progress-bar__fill").style.width = 0;
document.querySelector(
".progress-bar--primary .progress-bar__fill"
).style.width = 0;
currentPost.classList.remove("post--active");
postIndex++;
currentMainPost.classList.add("main-post--not-active");
currentMainPost.classList.remove("main-post--active");
// reset postIndex to loop over the slides again
if (postIndex === posts.length) {
postIndex = 0;
}
currentPost = posts[postIndex];
currentMainPost = mainPosts[postIndex];
} else {
i++;
currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
document.querySelector(
".progress-bar--primary .progress-bar__fill"
).style.width = `${i}%`;
currentPost.classList.add("post--active");
currentMainPost.classList.add("main-post--active");
currentMainPost.classList.remove("main-post--not-active");
}
}@import url("+Web:400,700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
// height: 100vh;
// display: grid;
// grid-template-rows: 1fr 3fr 1.5fr;
// grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
// row-gap: 2vh;
font-family: "Titillium Web", sans-serif;
}
.carousel {
min-height: 100vh;
display: grid;
grid-template-rows: 1fr 3fr 1.5fr;
grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
row-gap: 2vh;
position: relative;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 100%;
&__fill {
width: 0;
height: inherit;
background: #c20000;
transition: all 0.16s;
}
&--primary {
z-index: 2;
}
}
.main-post-wrapper {
// height: 100vh;
// border: solid 2px green;
grid-row: 1 / 4;
grid-column: 1 / 7;
position: relative;
}
.slides {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.main-post {
position: absolute;
top: 100%;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
&__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#0e0d0e, 0.5);
}
}
&__content {
position: absolute;
top: 40%;
left: 4%;
transform: translateY(-40%);
color: #fff;
width: 90%;
}
&__tag-wrapper {
margin: 0;
display: inline-flex;
overflow: hidden;
}
&__tag {
font-size: 0.95em;
background: #c20000;
padding: 6px 18px;
}
&__title {
font-weight: 700;
font-size: 1.95em;
line-height: 1.25;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
&__link {
text-decoration: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
&-text {
font-size: 0.9em;
}
&-icon {
&--arrow {
margin-left: 12px;
}
&--play-btn {
margin-right: 12px;
}
}
}
}
.main-post__link:hover .main-post__link-text,
.main-post__link:hover .main-post__link-icon--arrow path {
color: #c20000;
stroke: #c20000;
}
.main-post--active {
top: 0;
z-index: 1;
transition: top 0.9s 0.4s ease-out;
}
.main-post--not-active {
top: 100%;
z-index: 0;
transition: top 0.75s 2s;
}
.main-post.main-post--active .main-post__tag-wrapper {
width: 25%;
transition: all 0.98s 1.9s;
}
.main-post.main-post--not-active .main-post__tag-wrapper {
width: 0;
transition: width 0.3s 0.2s;
}
.main-post.main-post--active .main-post__title {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
}
.main-post.main-post--not-active .main-post__title {
transform: translateY(40px);
opacity: 0;
transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
}
.main-post.main-post--active .main-post__link {
opacity: 1;
transition: opacity 0.9s 2.2s;
}
.main-post.main-post--not-active .main-post__link {
opacity: 0;
transition: opacity 0.5s 0.2s;
}
.posts-wrapper {
grid-row: 3 / 4;
grid-column: 3 / 6;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 14px;
z-index: 1;
}
.post {
background: rgba(#0e0d0e, 0.6);
opacity: 0.3;
color: #fff;
position: relative;
padding: 16px 20px;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8em;
}
&__tag {
color: #80837e;
}
&__title {
font-weight: 400;
font-size: 0.95em;
line-height: 1.5;
}
&--active {
opacity: 1;
background: rgba(#0e0d0e, 0.75);
}
&:not(.post--active) {
pointer-events: none;
}
}
.hide-on-mobile {
display: none;
}
@media screen and (min-width: 768px) {
.main-post__title {
font-size: 2.9em;
}
}
@media screen and (min-width: 1024px) {
.hide-on-mobile {
display: grid;
}
.posts-wrapper {
grid-column: 2 / 6;
}
.hide-on-desktop {
display: none;
}
}
@media screen and (min-width: 1440px) {
.main-post__content {
width: 45%;
}
.posts-wrapper {
grid-column: 3 / 6;
}
}<div class="carousel">
<div class="progress-bar progress-bar--primary hide-on-desktop">
<div class="progress-bar__fill"></div>
</div>
<header class="main-post-wrapper">
<div class="slides">
<article class="main-post main-post--active">
<div class="main-post__image">
<img src=".jpg.transform/9col/image.jpg" alt="New McLaren wind tunnel 'critical' to future performance, says Tech Director Key" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">News</span>
</div>
<h1 class="main-post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h1>
<a class="main-post__link" href="#">
<span class="main-post__link-text">find out more</span>
<svg
class="main-post__link-icon main-post__link-icon--arrow"
width="37"
height="12"
viewBox="0 0 37 12"
fill="none"
xmlns=""
>
<path
d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
stroke="white"
/>
</svg>
</a>
</div>
</article>
<article class="main-post main-post--not-active">
<div class="main-post__image">
<img src=".jpg.transform/9col-retina/image.jpg" alt="What To Watch For in the 2019 Hungarian Grand Prix" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">Video</span>
</div>
<h1 class="main-post__title">What To Watch For in the 2019 Hungarian Grand Prix</h1>
<a class="main-post__link" href="#">
<svg
class="main-post__link-icon main-post__link-icon--play-btn"
width="30"
height="30"
viewBox="0 0 20 20"
fill="none"
xmlns=""
>
<circle
cx="10"
cy="10"
r="9"
stroke="#C20000"
stroke-width="2"
/>
<path d="M14 10L8 6V14L14 10Z" fill="white" />
</svg>
<span class="main-post__link-text">play video</span>
</a>
</div>
</article>
<article class="main-post main-post--not-active">
<div class="main-post__image">
<img src=".jpg.transform/9col-retina/image.jpg" alt="Hamilton wants harder championship fight from Leclerc and
Verstappen" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">News</span>
</div>
<h1 class="main-post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
</h1>
<a class="main-post__link" href="#">
<span class="main-post__link-text">find out more</span>
<svg
class="main-post__link-icon main-post__link-icon--arrow"
width="37"
height="12"
viewBox="0 0 37 12"
fill="none"
xmlns=""
>
<path
d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
stroke="white"
/>
</svg>
</a>
</div>
</article>
</div>
</header>
<div class="posts-wrapper hide-on-mobile">
<article class="post post--active">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">News</span>
<p class="post__published">16 August 2019</p>
</header>
<h2 class="post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h2>
</article>
<article class="post">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">Video</span>
<p class="post__published">12 August 2019</p>
</header>
<h2 class="post__title">What To Watch For in the 2019 Hungarian Grand Prix</h2>
</article>
<article class="post">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">News</span>
<p class="post__published">08 August 2019</p>
</header>
<h2 class="post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
</h2>
</article>
</div>
</div>I'm trying to replicate the following codefor my react project, but it is throwing me the error "Type Error: Cannot read property 'query Selector' of undefined". Here is a Screenshot of the error. Suggest me where should i correct to make my code run.
I also would like to know how to use JavaScript externally or internally in Reactjs.
let mainPosts = document.querySelectorAll(".main-post");
let posts = document.querySelectorAll(".post");
let i = 0;
let postIndex = 0;
let currentPost = posts[postIndex];
let currentMainPost = mainPosts[postIndex];
let progressInterval = setInterval(progress, 100); // 180
function progress() {
if (i === 100) {
i = -5;
// reset progress bar
currentPost.querySelector(".progress-bar__fill").style.width = 0;
document.querySelector(
".progress-bar--primary .progress-bar__fill"
).style.width = 0;
currentPost.classList.remove("post--active");
postIndex++;
currentMainPost.classList.add("main-post--not-active");
currentMainPost.classList.remove("main-post--active");
// reset postIndex to loop over the slides again
if (postIndex === posts.length) {
postIndex = 0;
}
currentPost = posts[postIndex];
currentMainPost = mainPosts[postIndex];
} else {
i++;
currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
document.querySelector(
".progress-bar--primary .progress-bar__fill"
).style.width = `${i}%`;
currentPost.classList.add("post--active");
currentMainPost.classList.add("main-post--active");
currentMainPost.classList.remove("main-post--not-active");
}
}@import url("https://fonts.googleapis./css?family=Titillium+Web:400,700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
// height: 100vh;
// display: grid;
// grid-template-rows: 1fr 3fr 1.5fr;
// grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
// row-gap: 2vh;
font-family: "Titillium Web", sans-serif;
}
.carousel {
min-height: 100vh;
display: grid;
grid-template-rows: 1fr 3fr 1.5fr;
grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
row-gap: 2vh;
position: relative;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 100%;
&__fill {
width: 0;
height: inherit;
background: #c20000;
transition: all 0.16s;
}
&--primary {
z-index: 2;
}
}
.main-post-wrapper {
// height: 100vh;
// border: solid 2px green;
grid-row: 1 / 4;
grid-column: 1 / 7;
position: relative;
}
.slides {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.main-post {
position: absolute;
top: 100%;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
&__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#0e0d0e, 0.5);
}
}
&__content {
position: absolute;
top: 40%;
left: 4%;
transform: translateY(-40%);
color: #fff;
width: 90%;
}
&__tag-wrapper {
margin: 0;
display: inline-flex;
overflow: hidden;
}
&__tag {
font-size: 0.95em;
background: #c20000;
padding: 6px 18px;
}
&__title {
font-weight: 700;
font-size: 1.95em;
line-height: 1.25;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
&__link {
text-decoration: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
&-text {
font-size: 0.9em;
}
&-icon {
&--arrow {
margin-left: 12px;
}
&--play-btn {
margin-right: 12px;
}
}
}
}
.main-post__link:hover .main-post__link-text,
.main-post__link:hover .main-post__link-icon--arrow path {
color: #c20000;
stroke: #c20000;
}
.main-post--active {
top: 0;
z-index: 1;
transition: top 0.9s 0.4s ease-out;
}
.main-post--not-active {
top: 100%;
z-index: 0;
transition: top 0.75s 2s;
}
.main-post.main-post--active .main-post__tag-wrapper {
width: 25%;
transition: all 0.98s 1.9s;
}
.main-post.main-post--not-active .main-post__tag-wrapper {
width: 0;
transition: width 0.3s 0.2s;
}
.main-post.main-post--active .main-post__title {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
}
.main-post.main-post--not-active .main-post__title {
transform: translateY(40px);
opacity: 0;
transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
}
.main-post.main-post--active .main-post__link {
opacity: 1;
transition: opacity 0.9s 2.2s;
}
.main-post.main-post--not-active .main-post__link {
opacity: 0;
transition: opacity 0.5s 0.2s;
}
.posts-wrapper {
grid-row: 3 / 4;
grid-column: 3 / 6;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 14px;
z-index: 1;
}
.post {
background: rgba(#0e0d0e, 0.6);
opacity: 0.3;
color: #fff;
position: relative;
padding: 16px 20px;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8em;
}
&__tag {
color: #80837e;
}
&__title {
font-weight: 400;
font-size: 0.95em;
line-height: 1.5;
}
&--active {
opacity: 1;
background: rgba(#0e0d0e, 0.75);
}
&:not(.post--active) {
pointer-events: none;
}
}
.hide-on-mobile {
display: none;
}
@media screen and (min-width: 768px) {
.main-post__title {
font-size: 2.9em;
}
}
@media screen and (min-width: 1024px) {
.hide-on-mobile {
display: grid;
}
.posts-wrapper {
grid-column: 2 / 6;
}
.hide-on-desktop {
display: none;
}
}
@media screen and (min-width: 1440px) {
.main-post__content {
width: 45%;
}
.posts-wrapper {
grid-column: 3 / 6;
}
}<div class="carousel">
<div class="progress-bar progress-bar--primary hide-on-desktop">
<div class="progress-bar__fill"></div>
</div>
<header class="main-post-wrapper">
<div class="slides">
<article class="main-post main-post--active">
<div class="main-post__image">
<img src="https://www.formula1./content/dam/fom-website/manual/Misc/2019-Races/Monaco2019/McLarenMonaco19.jpg.transform/9col/image.jpg" alt="New McLaren wind tunnel 'critical' to future performance, says Tech Director Key" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">News</span>
</div>
<h1 class="main-post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h1>
<a class="main-post__link" href="#">
<span class="main-post__link-text">find out more</span>
<svg
class="main-post__link-icon main-post__link-icon--arrow"
width="37"
height="12"
viewBox="0 0 37 12"
fill="none"
xmlns="http://www.w3/2000/svg"
>
<path
d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
stroke="white"
/>
</svg>
</a>
</div>
</article>
<article class="main-post main-post--not-active">
<div class="main-post__image">
<img src="https://www.formula1./content/dam/fom-website/sutton/2019/Hungary/Saturday/1017645792-LAT-20190803-_2ST5188.jpg.transform/9col-retina/image.jpg" alt="What To Watch For in the 2019 Hungarian Grand Prix" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">Video</span>
</div>
<h1 class="main-post__title">What To Watch For in the 2019 Hungarian Grand Prix</h1>
<a class="main-post__link" href="#">
<svg
class="main-post__link-icon main-post__link-icon--play-btn"
width="30"
height="30"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3/2000/svg"
>
<circle
cx="10"
cy="10"
r="9"
stroke="#C20000"
stroke-width="2"
/>
<path d="M14 10L8 6V14L14 10Z" fill="white" />
</svg>
<span class="main-post__link-text">play video</span>
</a>
</div>
</article>
<article class="main-post main-post--not-active">
<div class="main-post__image">
<img src="https://www.formula1./content/dam/fom-website/manual/Misc/2019-Races/Austria-2019/Top3Austria2019.jpg.transform/9col-retina/image.jpg" alt="Hamilton wants harder championship fight from Leclerc and
Verstappen" />
</div>
<div class="main-post__content">
<div class="main-post__tag-wrapper">
<span class="main-post__tag">News</span>
</div>
<h1 class="main-post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
</h1>
<a class="main-post__link" href="#">
<span class="main-post__link-text">find out more</span>
<svg
class="main-post__link-icon main-post__link-icon--arrow"
width="37"
height="12"
viewBox="0 0 37 12"
fill="none"
xmlns="http://www.w3/2000/svg"
>
<path
d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
stroke="white"
/>
</svg>
</a>
</div>
</article>
</div>
</header>
<div class="posts-wrapper hide-on-mobile">
<article class="post post--active">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">News</span>
<p class="post__published">16 August 2019</p>
</header>
<h2 class="post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h2>
</article>
<article class="post">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">Video</span>
<p class="post__published">12 August 2019</p>
</header>
<h2 class="post__title">What To Watch For in the 2019 Hungarian Grand Prix</h2>
</article>
<article class="post">
<div class="progress-bar">
<div class="progress-bar__fill"></div>
</div>
<header class="post__header">
<span class="post__tag">News</span>
<p class="post__published">08 August 2019</p>
</header>
<h2 class="post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
</h2>
</article>
</div>
</div>- when is your js loaded? at which part of html? – Apostolos Commented Jul 24, 2020 at 8:06
- I've added js code internally to my Reactjs code.I don't know how to use external js files in reactjs. Every time of execution am getting same error @Apostolos – Sreejith Commented Jul 24, 2020 at 8:08
-
An easy way to check is to
console.log(posts)on the top, if it's empty, you are incurring in timing issues (you're trying to access the DOM when it's still loading/not present) – Greedo Commented Jul 24, 2020 at 8:12 - Thank you so much @Apostolos for resolving my problem. Thank you so much. – Sreejith Commented Jul 24, 2020 at 11:09
- @Shakthi glad I helped but I cannot see the ment where you posted the link to your sandbox. I don't know why it was deleted. – Apostolos Commented Jul 24, 2020 at 11:13
1 Answer
Reset to default 1Although it is not a react question, what you are trying to do won't work because DOM is not loaded pletely when your js is read.
What you need is a load event and then load all your code there, because you have to make sure that DOM is fully loaded. Also you can make an extra check if (currentPost) to check if variable is not undefined
window.addEventListener('load', (event) => {
let mainPosts = document.querySelectorAll(".main-post");
let posts = document.querySelectorAll(".post");
let i = 0;
let postIndex = 0;
let currentPost = posts[postIndex];
let currentMainPost = mainPosts[postIndex];
.
.
.
});
check this sandbox https://codesandbox.io/s/reverent-gates-9h9ip
本文标签： javascriptTypeError Cannot read property 39querySelector39 of undefinedStack Overflow
版权声明：本文标题：javascript - TypeError: Cannot read property 'querySelector' of undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742281320a2446146.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论