So , I was trying to make for my website an automatic way that the words can change, It almost worked , but idk why I get the word "undefined"; Can you please help?https://imgur.com/a/yB11BTe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ColorBundle | Welcome</title>
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--CSS-->
<link rel="stylesheet" href="./style/style.css">
<!--GOOGLE FONTS-->
<link href="https://fonts.googleapis.com/css?family=Odibee+Sans|Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<!--
font-family: 'Odibee Sans', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Shadows Into Light', cursive;
-->
</head>
<body>
<div class="nav">
<div class="nav-brand">
<h1>ColorBundle</h1>
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<a href="#">HOME</a>
<div class="menu-mobile-border"></div>
<a href="#">ABOUT</a>
<div class="menu-mobile-border"></div>
<a href="#">WORKS</a>
<div class="menu-mobile-border"></div>
<a href="#">SERVICES</a>
<div class="menu-mobile-border"></div>
<a href="#">BLOG</a>
<div class="menu-mobile-border"></div>
<a href="#">CONTACT</a>
<div class="menu-mobile-border"></div>
</div>
</div>
<div class="top-img">
<h2><span id="wordChange">creative.</span></h2>
</div>
<script src="./script/changeword.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
JAVASCRIPT
var words = ['affordable.', 'fast.', 'easy.', 'different.'],
element = document.getElementById('wordChange'),
currentWord = 0;
window.setInterval(function () {
currentWord++;
if (currentWord > words.length) currentWord = 0;
element.innerHTML = words[currentWord];
}, 1000);
Can you please help me solve this problem? I know it's not that big of a deal but I am curious what is from