[英]index.js:28 Uncaught TypeError: Cannot read property 'addEventListener' of null ( at toggleActiveOnClick and at Array.forEach)
For a project I have to evolve a piece of code but I can not.对于一个项目,我必须开发一段代码,但我不能。 This bit of code initially allows me to toggle the 4 clickable elements of a certain form and it works perfectly.
这段代码最初允许我切换某个表单的 4 个可点击元素,并且效果很好。
const choices = document.querySelectorAll('.clickable');
const toggleActiveClass = (event) => {
event.currentTarget.classList.toggle('active');
};
const toggleActiveOnClick = (choice) => {
choice.addEventListener('click', toggleActiveClass);
};
choices.forEach(toggleActiveOnClick);
However, now I have to make sure that when I select one or the other of the first 2 elements I can not toggle the other and the same for the next 2. I tried this piece of code but when I open the console in chrome tool i get the error message present in the title of this post.但是,现在我必须确保当我 select 前 2 个元素中的一个或另一个时,我不能切换另一个,下一个 2 相同。我尝试了这段代码,但是当我在 chrome 工具中打开控制台时我收到这篇文章标题中出现的错误消息。 Here is the piece of code in question:
这是有问题的代码:
const upsell = document.querySelector('.clickable > .fas fa-shopping-cart');
const crossell = document.querySelector('.clickable > .fas fa-cart-plus');
const standard = document.querySelector('.clickable > .fas fa-gift');
const discount = document.querySelector('.clickable > .fas fa-percent');
const choices = [ upsell, crossell, standard, discount ];
const toggleActiveClass = (event) => {
event.currentTarget.classList.toggle('active');
};
const toggleActiveOnClick = (choice) => {
if (choice === upsell.addEventListener('click', toggleActiveClass)) {
crossell.classList.remove('active');
} else if (choice === crossell.addEventListener('click', toggleActiveClass)) {
upsell.classList.remove('active');
} else if (choice === standard.addEventListener('click', toggleActiveClass)) {
discount.classList.remove('active');
} else if (choice === discount.addEventListener('click', toggleActiveClass)) {
standard.classList.remove('active');
}
};
choices.forEach(toggleActiveOnClick);
Here is the corresponding html这里是对应的html
<div class="form-group">
<label for="bundle-type">Bundle Type</label>
<div class="d-flex flex-wrap justify-content-center pt-4">
<div id="test1">
<div class="clickable">
<i class="fas fa-shopping-cart"></i>
<small>Upsell</small>
</div>
</div>
<div id="test2">
<div class="clickable">
<i class="fas fa-cart-plus"></i>
<small>Cros-sell</small>
</div>
</div>
</div>
<label for="bundle-type">Offer Type</label>
<div class="d-flex flex-wrap justify-content-center pt-4">
<div id="test3">
<div class="clickable">
<i class="fas fa-gift"></i>
<small>Standard</small>
</div>
</div>
<div id="test4">
<div class="clickable">
<i class="fas fa-percent"></i>
<small>Discounted</small>
</div>
</div>
</div>
</div>
And the CSS和 CSS
.clickable i {
font-size: 24px;
margin-bottom: 10px;
}
.clickable:hover i {
color: #167FFB;
}
.clickable.active {
color: inherit;
border-color: inherit;
}
.clickable.active i {
color: #0F60C4;
}
Your selectors are just wrong, and you could have verified them ( upsell
and the others) with debugging/logging.您的选择器是错误的,您可以通过调试/记录验证它们(
upsell
和其他)。
class="fas fa-shopping-cart"
asssigns two classes to the element, fas
and fa-shopping-cart
. class="fas fa-shopping-cart"
将两个类分配给元素fas
和fa-shopping-cart
。 While it may be possible that after digesting the specification someone can come up with a selector for multiple classes, you could simply ignore fas
(which is the same for all of them), and go for the specific ones instead:虽然在消化规范后可能有人可以提出多个类的选择器,但您可以简单地忽略
fas
(对所有类都相同),而 go 则用于特定的类:
console.log("Original attempt:"); const upsell = document.querySelector('.clickable >.fas fa-shopping-cart'); const crossell = document.querySelector('.clickable >.fas fa-cart-plus'); console.log(upsell); console.log(crossell); console.log("Simplified attempt:"); const upsellSimple = document.querySelector('.clickable >.fa-shopping-cart'); const crossellSimple = document.querySelector('.clickable >.fa-cart-plus'); console.log(upsellSimple); console.log(crossellSimple);
<label for="bundle-type">Bundle Type</label> <div class="d-flex flex-wrap justify-content-center pt-4"> <div id="test1"> <div class="clickable"> <i class="fas fa-shopping-cart"></i> <small>Upsell</small> </div> </div> <div id="test2"> <div class="clickable"> <i class="fas fa-cart-plus"></i> <small>Cros-sell</small> </div> </div> </div>
addEventListener()
has no meaningful return value:
addEventListener()
没有有意义的返回值:
Return value:
undefined
返回值:
undefined
The comparisons ( if (choice === xy.addEventListener(...)){...}
) can not really do anything useful.比较(
if (choice === xy.addEventListener(...)){...}
)并不能真正做任何有用的事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.