Whenever I interact with the navigation buttons - specifically previous, next, and random - the contents of all div elements change accordingly. The image element, however, remains unchanged. I am encountering an issue where the image does not correspond to the correct array I am on. I'm unsure of how to rectify my code to display the image that matches the current array. Other functionalities seem to be working correctly.
// local reviews data
const reviews = [
...
// JavaScript code
...
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
...
// CSS styles
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starter</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>review project</h1>
<!-- javascript -->
<img src="" id="person-img" alt="">
<div id="author"></div>
<div id="job"></div>
<div id="info"></div>
<button class="prev-btn" type="button">Previous</button>
<button class="next-btn" type="button">Next</button>
<button class="randomBtn" type="button">randomBtn</button>
<script src="app.js"></script>
</body>
</html>