我正在尝试制作一个评论页面，其中我有人们的名字，图像和他们留下的评论。然后有两个箭头按钮滚动到下一个或上一个评论，然后有一个更大的按钮，每次你点击它都会给你一个随机的评论。
问题是我一直得到一个引用错误或元素是空的，或元素是未定义的。我已经尝试了很多东西，我似乎不能弄清楚，我会留下我的html和JS代码的相关部分
<body>
<main>
<div class="title">
<h2>Our Reviews</h2>
<div class="underline"></div>
</div>
<div class="container">
<div class="img-container">
<img src=./person-1.jpeg id="person-img" alt="Image of reviewer">
</div>
<div class="profile">
<h4 id="author">Sara Jones</h4>
<p id="job-title">Web Developer</p>
</div>
<div id="info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur id officia alias est earum illo optio asperiores eius culpa magni provident, distinctio dolore illum numquam eligendi. Aperiam cum odit eius.</p>
</div>
<div class="chevron">
<i class="fa fa-chevron-left prev-btn"></i>
<i class="fa fa-chevron-right next-btn"></i>
</div>
<button id="surprise">Suprise me</button>
</div>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
JS,我有一个四aray对象每个containin名称、形象,职称,一个惟一的id,每个人留下的评论
// set initial item
const currentItem = 0;
document.addEventListener('DOMContentLoaded', function(){
// get items
const author = document.getElementById('#author');
const job = document.getElementById('#job-title');
const img = document.getElementById('#person-img');
const info = document.querySelector('.info');
const prev = document.querySelector('.prev-btn');
const next = document.querySelector('.next-btn');
const button = document.getElementById('#surprise');
// display current item
showPerson(currentItem);
// listen for button click
button.addEventListener('click', function(){
// generate and display random item
const getRandomReview = reviews[getRandomNumber()]
showPerson(getRandomReview);
})
})
// generate random number
const getRandomNumber = () => {
return Math.floor(Math.random * reviews.length);
}
// display item
const showPerson = (person) => {
const item = reviews[person];
img.src = item.img;
author.textContent = item.name;
job.textContent = item.job;
info.textContent = item.text;
}
使用getElementById时不需要#符号。你只需要id值本身。
去除#或使用querySelector
const author = document.getElementById('author');
或
const author = document.querySelector('#author');