我遇到了"无法读取null属性"类型的错误。。我看到页面运行正常，但在控制台中它抛出了主题行错误。
// const panel = document.querySelector("#panel");
const sendButton = document.querySelector('#send');
const ratingsContainer = document.querySelector('.ratings-container');
const ratings = document.querySelectorAll('.rating');
const experience = document.querySelectorAll('small');
const removeActive = () => {
for (let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active');
}
};
ratingsContainer.addEventListener('click', (e) => {
if (e.target.parentNode.classList.contains('rating')) {
removeActive();
e.target.parentNode.classList.add('active');
}
});
sendButton.addEventListener('click', () => {
console.log(experience[0]);
for (let i = 0; i < experience.length; i++) {
if (experience[i].innerHTML === 'Unhappy' || experience[i].innerHTML === 'Neutral') {
document.location.href = 'negative_review.html';
} else {
document.location.href = 'positive_review.html';
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<form>
<strong>Great! Would you like to post your review?</strong>
<br />
<br />
<a href="https://www.google.com/" class="button-link">Google</a>
<br />
</form>
</div>
<script src="script.js"></script>
</body>
</html>此行试图找到ratings-container:类的内容
const ratingsContainer = document.querySelector('.ratings-container');
但是html中没有该类，所以ratingsContainer实际上是null，它没有addEventListener方法。
代码的问题是sendButton元素和ratingsContainer元素为null。html中没有适合您编写的选择器的elemnt。希望我能帮上忙。
// const panel = document.querySelector("#panel");
const sendButton = document.querySelector('#send');
const ratingsContainer = document.querySelector('.ratings-container');
const ratings = document.querySelectorAll('.rating');
const experience = document.querySelectorAll('small');
const removeActive = () => {
for (let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active');
}
};
ratingsContainer.addEventListener('click', (e) => {
if (e.target.parentNode.classList.contains('rating')) {
removeActive();
e.target.parentNode.classList.add('active');
}
});
sendButton.addEventListener('click', () => {
console.log(experience[0]);
for (let i = 0; i < experience.length; i++) {
if (experience[i].innerHTML === 'Unhappy' || experience[i].innerHTML === 'Neutral') {
document.location.href = 'negative_review.html';
} else {
document.location.href = 'positive_review.html';
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<form>
<strong>Great! Would you like to post your review?</strong>
<br />
<br />
<a href="https://www.google.com/" class="button-link">Google</a>
<br />
</form>
</div>
<button type="button" id="send"></button>
<div class="ratings-container"></div>
<script src="script.js"></script>
</body>
</html>