please what could be the problem with my code? Everything works but as soon as I input something in the first input, it throws the following error in the console - Uncaught ReferenceError: code is not defined at HTMLDocument.o (shortcut.js:2:561). It is a multistep form.
Everything is okay with my CSS and JS because even when I remove the Js, the error persists.
<!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="./css/style.css">
<link rel="shortcut icon" href="./img/logoIcon.png" type="image/x-icon">
<title>Registration Form</title>
</head>
<body>
<form action="#" class="form" id="form">
<h1 class="form-title"> Registration Form</h1>
<p id="percentage">0% completed</p>
<!-- Progress bar -->
<div class="progress-bar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active " data-title="Name info"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="ID"></div>
<div class="progress-step" data-title="Password"></div>
</div>
<!-- Form step 1 -->
<div class="form-step form-step-active">
<div class="input-group">
<label for="username">Surname</label>
<input type="text" name="surname" id="surname" placeholder="Enter Surname">
</div>
<div class="input-group">
<label for="Firstname">First Name</label>
<input type="text" name="Firstname" id="Firstname" placeholder="Enter Firstname">
</div>
<div class="input-group">
<label for="othernames">Other Names</label>
<input type="text" name="othernames" id="othernames" placeholder="Enter othernames">
</div>
<div>
<a href="#" class="btn btn-next first-next-btn">Next</a>
</div>
</div>
<!-- Form step 2 -->
<div class="form-step">
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" placeholder="Enter Phone number">
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter email address">
</div>
<div class="btn-group">
<a href="#" class="btn btn-prev">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
</div>
<!-- Form step 3 -->
<div class="form-step">
<div class="input-group">
<label for="dob">Date of Birth</label>
<input type="date" name="dob" id="dob">
</div>
<div class="input-group">
<label for="NIN">NIN</label>
<input type="number" name="nin" id="nin" placeholder="Input your NIN">
</div>
<div class="input-group">
<label for="bvn">BVN</label>
<input type="number" name="bvn" id="bvn" placeholder="Input your BVN">
</div>
<div class="btn-group">
<a href="#" class="btn btn-prev">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
</div>
<!-- Form step 4 -->
<div class="form-step">
<div class="input-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="input-group">
<label for="password">Confirm Password</label>
<input type="password" name="password" id="passwordConfirm">
</div>
<div class="btn-group">
<a href="#" class="btn btn-prev">Previous</a>
<input type="submit" value="submit" class="btn" id="submitbtn">
</div>
</div>
</form>
<div class="confirmation" id="confirm">
<h1>Thanks </h1>
<p>Hi <span id="name">Kam</span>, Your registration is succesful, please check your mail, we have sent you a link to verify your account</p>
<p>Kind Regards</p>
</div>
<script src="./JS/script.js"></script>
</body>
</html>